# Kbd

> A keyboard shortcut, shown with the user's platform keys.

## Examples

### Chords

`mod` is ⌘ on Apple, Ctrl elsewhere.

```vue
<template>
  <ul class="demo-list">
    <li>Command palette <UiKbd keys="mod+k" /></li>
    <li>Save as <UiKbd keys="mod+shift+s" /></li>
    <li>New line <UiKbd keys="shift enter" /></li>
    <li>Forced PC keys <UiKbd keys="mod+alt+p" platform="pc" /></li>
  </ul>
</template>
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `keys` | `string` | — | Chord written as "mod+k" or "shift enter". `mod` is ⌘ on Apple, Ctrl elsewhere. |
| `size` | `"medium" \| "small"` | `"medium"` | Size hook, exposed as `data-kbd-size`. |
| `platform` | `"apple" \| "pc"` | — | Forces a platform's key caps instead of the detected one. |

| Slot | Props | Description |
| --- | --- | --- |
| `default` | — | A single literal key, when `keys` isn't set. |

## Styling

- Parts (`[data-part="…"]`): `kbd`, `key`, `kbd-label`
- State attributes: `data-kbd-size`

## Accessibility

- Screen readers hear key names, e.g. “Command K”.