Chuyển tới nội dung
werewolf-ui
Component

Kbd

A keyboard shortcut hint rendered as a native kbd element. KbdGroup arranges the separate keys in a shortcut sequence. These components display shortcuts without registering keyboard handlers.

Xem trước

⌘K

Props

  • size
  • key
import { Kbd, KbdGroup } from "@/components/ui/kbd"

<KbdGroup>
  <Kbd aria-label="Command">⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Cách dùng

Khi nào dùng

  • Show a keyboard shortcut beside the action it activates.
  • Describe a sequence of keys in instructions.

Khi nào không dùng

  • An interactive key or action. Use Button.
  • Registering a keyboard shortcut. Add the handler in your application.

Biến thể

size

Small or medium shortcut hint.

  • ⌘K

    sm

  • ⌘K

    mdmặc định

import { Kbd, KbdGroup } from "@/components/ui/kbd"

<KbdGroup>
  <Kbd size="sm" aria-label="Command">⌘</Kbd>
  <Kbd size="sm">K</Kbd>
</KbdGroup>
<KbdGroup>
  <Kbd aria-label="Command">⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Ví dụ

Shortcut sequence

⌘K
import { Kbd, KbdGroup } from "@/components/ui/kbd"

<KbdGroup aria-label="Command K">
  <Kbd aria-label="Command">⌘</Kbd>
  <Kbd>K</Kbd>
</KbdGroup>

Beside an action

import { Button } from "@/components/ui/button"
import { Kbd, KbdGroup } from "@/components/ui/kbd"

<Button variant="secondary">
  <span>Open search</span>
  <KbdGroup aria-label="Control K">
    <Kbd size="sm" aria-label="Control">Ctrl</Kbd>
    <Kbd size="sm">K</Kbd>
  </KbdGroup>
</Button>

Nên và không nên

Nên

  • Render each key in its own Kbd and combine keys with KbdGroup.
  • Use readable names for symbols that assistive technology may pronounce ambiguously.

Không nên

  • Do not make Kbd clickable or focusable.
  • Do not display a shortcut that the application does not support.

Props

TênKiểuGiá trịMặc địnhMô tả
sizeenumsm | mdmdSmall or medium shortcut hint.

Slot

TênBắt buộcMô tả
childrencóKey label or shortcut symbol.

Cấu tạo

PhầnMô tả
rootNative kbd with mono type, sunken fill, neutral border and primary text.
groupInline KbdGroup wrapper with token spacing between keys.

Khả năng truy cập

Role: none

  • Kbd is not focusable and does not take keyboard input.
  • Give shortcut symbols readable names, such as aria-label="Command" for ⌘.
  • A displayed shortcut is only a hint. The application owns shortcut handling.

Cài đặt

npx shadcn add https://werewolf-ui.vercel.app/r/kbd.json

Lệnh này thêm luôn styles/werewolf.css, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau @import "tailwindcss", với đường dẫn tính từ file CSS đó (từ app/globals.css là @import "../styles/werewolf.css").