# Kbd

A keyboard key or shortcut, as text.

```ehtml Example
import { Kbd, KbdGroup } from "@elements/ui/kbd";

Press <Kbd>Esc</Kbd> to close.
<KbdGroup><Kbd>Ctrl</Kbd>+<Kbd>B</Kbd></KbdGroup>
<KbdGroup keys={["⌘", "K"]} />
<KbdGroup keys={["Ctrl", "Shift", "P"]} separator="+" />
```

## Parts

| Part | What it is |
|---|---|
| `Kbd` | `<kbd class="kbd">`: one keycap. |
| `KbdGroup` | `<kbd class="kbd-group">`: a key combination, nested kbd as the HTML spec writes it. |
| `.kbd-separator` | The text between keys rendered from keys. |

## Attributes

### Kbd

| Attribute | Type | Default | Description |
|---|---|---|---|
| `class` | `string` | `""` | Extra classes on the `<kbd>`. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Other attributes: title names a symbol key. |

### KbdGroup

| Attribute | Type | Default | Description |
|---|---|---|---|
| `keys` | `string[]` | `[]` | Renders a Kbd for each key, after the slot. |
| `separator` | `string` | `""` | Text between the keys from keys, such as "+" or "then". |
| `class` | `string` | `""` | Extra classes on the group. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Other attributes for the group. |

## Slots

| Slot | Part | Content |
|---|---|---|
| `default` | `Kbd` | The key label: text or an `<Icon>`. |
| `default` | `KbdGroup` | Kbd parts and the text between them. |

## Accessibility

- Native `<kbd>`: read as text, never focusable.
- Symbol keys read as their Unicode names. Pass a title, or write the word, where the name matters.
- Inside a button the cap inherits the button's text color, so its contrast follows the button.

## See also

- [Badge](badge): A small label for a status, a count or a category, built on the pill.
- [Card](card): A surface with a header, body and footer, built on the base card styles.
- [Alert](alert): A callout that draws attention to a message, with an icon, a title and an action.
- [Icon](icon): An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.
- [Separator](separator): A horizontal or vertical rule between content, semantic or decorative.
- [Skeleton](skeleton): A placeholder shape shown while content loads, or wrapped around the content so it never moves.