Kbd

Menampilkan tombol keyboard yang ditekan pengguna.

⌘⇧⌥⌃Ctrl+B

<script lang='ts' setup>
import { Kbd, KbdGroup } from '@/components/ui/kbd'
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <KbdGroup>
      <Kbd>⌘</Kbd>
      <Kbd>⇧</Kbd>
      <Kbd>⌥</Kbd>
      <Kbd>⌃</Kbd>
    </KbdGroup>

    <KbdGroup>
      <Kbd>Ctrl</Kbd>
      <span>+</span>
      <Kbd>B</Kbd>
    </KbdGroup>
  </div>
</template>

Instalasi

CLI

npx shadcn-vue@latest add kbd

Manual

Pasang dependensi berikut:

npm install reka-ui

Salin dan tempel kode sumber di GitHub ke project Anda.

Sesuaikan path import dengan struktur project Anda.

Penggunaan

<script setup lang="ts">
import { Kbd } from '@/components/ui/kbd'
</script>

<template>
  <Kbd>Ctrl</Kbd>
</template>

Contoh

Grup

Pakai komponen KbdGroup untuk mengelompokkan beberapa tombol keyboard.

Use Ctrl + BCtrl + K to open the command palette

<script setup lang="ts">
import { Kbd, KbdGroup } from '@/components/ui/kbd'
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <p class="text-muted-foreground text-sm">
      Use
      <KbdGroup>
        <Kbd>Ctrl + B</Kbd>
        <Kbd>Ctrl + K</Kbd>
      </KbdGroup>
      to open the command palette
    </p>
  </div>
</template>

Button

Letakkan komponen Kbd di dalam Button untuk menampilkan tombol keyboard di dalam tombol.

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Kbd } from '@/components/ui/kbd'
</script>

<template>
  <div class="flex flex-wrap items-center gap-4">
    <Button variant="outline" size="sm" class="pr-2">
      Accept <Kbd>⏎</Kbd>
    </Button>
    <Button variant="outline" size="sm" class="pr-2">
      Cancel <Kbd>Esc</Kbd>
    </Button>
  </div>
</template>

Tooltip

Letakkan komponen Kbd di dalam Tooltip untuk menampilkan tooltip yang memuat tombol keyboard.

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { ButtonGroup } from '@/components/ui/button-group'
import { Kbd, KbdGroup } from '@/components/ui/kbd'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip'
</script>

<template>
  <div class="flex flex-wrap gap-4">
    <ButtonGroup>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger as-child>
            <Button size="sm" variant="outline">
              Save
            </Button>
          </TooltipTrigger>
          <TooltipContent>
            <div class="flex items-center gap-2">
              Save Changes <Kbd>S</Kbd>
            </div>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger as-child>
            <Button size="sm" variant="outline">
              Print
            </Button>
          </TooltipTrigger>
          <TooltipContent>
            <div class="flex items-center gap-2">
              Print Document
              <KbdGroup>
                <Kbd>Ctrl</Kbd>
                <Kbd>P</Kbd>
              </KbdGroup>
            </div>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </ButtonGroup>
  </div>
</template>

Input Group

Letakkan komponen Kbd di dalam InputGroupAddon untuk menampilkan tombol keyboard di dalam input group.

⌘K

<script setup lang="ts">
import { SearchIcon } from '@lucide/vue'
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from '@/components/ui/input-group'
import { Kbd } from '@/components/ui/kbd'
</script>

<template>
  <div class="flex w-full max-w-xs flex-col gap-6">
    <InputGroup>
      <InputGroupInput placeholder="Search..." />
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        <Kbd>⌘</Kbd>
        <Kbd>K</Kbd>
      </InputGroupAddon>
    </InputGroup>
  </div>
</template>

Referensi API

Kbd

Pakai komponen Kbd untuk menampilkan satu tombol keyboard.

Prop	Tipe	Bawaan
class	string	``

<Kbd>
Ctrl
</Kbd>

KbdGroup

Pakai komponen KbdGroup untuk mengelompokkan beberapa komponen Kbd.

Prop	Tipe	Bawaan
class	string	``

<KbdGroup>
  <Kbd>Ctrl</Kbd>
  <Kbd>B</Kbd>
</KbdGroup>