Kbd
A keycap for a keyboard shortcut.
Usage
One Kbd per key. It renders a real <kbd> element.
Chords
The HTML spec allows nesting <kbd> to group a chord, but every renderer
draws a box per element — so a nested chord shows a box around boxes. Render one per key instead
and let the layout separate them.
Spoken labels
⌘, ⇧ and ⌥ are punctuation to a screen reader: some voices skip them,
others read a name nobody recognises. Pass label and the glyph is hidden
from the accessibility tree while the word is announced in its place. Plain letters and words need
no label.
The keycap is a picture of a key — it does not tell assistive technology that pressing it does
anything. That belongs on the control, as aria-keyshortcuts.
Sizes
Use sm inside a button or a menu row, md in body
copy.
Props
Plus every native <kbd> attribute via prop spreading.
| Prop | Type | Default |
|---|---|---|
size | 'sm' | 'md' | 'md' |
label A spoken alternative for the glyph, e.g. `label="Command"` for `⌘`. This exists because `⌘`, `⇧` and `⌥` are punctuation to a screen reader: some voices skip them entirely, others read a name nobody recognises. When a label is given the glyph is hidden from the accessibility tree and this text is announced instead, so the shortcut is legible both ways. Plain letters and words need no label — `K` and `Esc` already read correctly. | string | — |
class Extra classes merged onto the root element. | string | — |
children required | Snippet | — |