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

## Usage

### When to use

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

### When not to use

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

## Variants

### size

Small or medium shortcut hint.

Values: `sm`, `md`. Default: `md`.

## Examples

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

## Do and don't

### Do

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

### Don't

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

## Props

| Name | Type | Values | Default | Description |
| --- | --- | --- | --- | --- |
| `size` | `enum` | `sm`, `md` | `md` | Small or medium shortcut hint. |

### Slots

| Name | Required | Description |
| --- | --- | --- |
| `children` | yes | Key label or shortcut symbol. |

## Anatomy

| Part | Description |
| --- | --- |
| `root` | Native kbd with mono type, sunken fill, neutral border and primary text. |
| `group` | Inline KbdGroup wrapper with token spacing between keys. |

## Accessibility

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.

## Install

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

This also adds `styles/werewolf.css`, the tokens every component uses, and any other component it needs. Import that file once in your root CSS, after `@import "tailwindcss"`, with a path relative to that CSS file (from `app/globals.css` it is `@import "../styles/werewolf.css"`).