# 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.

## 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.

Giá trị: `sm`, `md`. Mặc định: `md`.

## Ví dụ

### Shortcut sequence

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

### Beside an action

```tsx
<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ên | Kiểu | Giá trị | Mặc định | Mô tả |
| --- | --- | --- | --- | --- |
| `size` | `enum` | `sm`, `md` | `md` | Small or medium shortcut hint. |

### Slot

| Tên | Bắt buộc | Mô tả |
| --- | --- | --- |
| `children` | có | Key label or shortcut symbol. |

## Cấu tạo

| Phần | Mô tả |
| --- | --- |
| `root` | Native kbd with mono type, sunken fill, neutral border and primary text. |
| `group` | Inline 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

```bash
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"`).