# Kbd · MIAN

Keyboard keys and shortcuts.

- Id: `kbd` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/kbd
- Use for: keyboard shortcut, key hint, hotkey.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-kbd`: On a <kbd>.

## Accessibility

- Use <kbd>. For symbols like ⌘ add a title or visually hidden text ("Command").

## Examples

### Shortcuts

```html
<span class="mn-row"><kbd class="mn-kbd" title="Command">⌘</kbd><kbd class="mn-kbd">K</kbd></span>
<span class="mn-muted mn-small">Press <kbd class="mn-kbd">Esc</kbd> to close, <kbd class="mn-kbd">↑</kbd> <kbd class="mn-kbd">↓</kbd> to move.</span>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/kbd/source