Keys and shortcuts rendered as keys, not prose.
| Prop | Type | Notes |
|---|---|---|
| keys | string[] | One or more keys; joined into a chord |
| size | S · M · L | 18 / 22 / 30px cap height |
| element | kbd | Semantic <kbd> for assistive tech |
| platform | auto | ⌘ on macOS, Ctrl elsewhere |
Kbd renders the keys to press. It is display only — pair it with a Menu item, a Tooltip, or docs copy, never as a control.
Use modifier symbols and a real <kbd> element.
Don't spell out modifiers in plain text. Render the keys.
Pair a shortcut with the action it triggers.
Don't document impossible chords. Keep them memorable.
Trailing shortcuts in a Menu or Command palette.
Hinting a shortcut inside a tooltip.
Inline in documentation and onboarding.
| Token | Value | Role |
|---|---|---|
| --kbd-h | 18 / 22 / 30px | Cap height S / M / L |
| --kbd-bg | #1A1B20 | Cap fill |
| --kbd-border | #2E2F36 | Edge, 2px on the bottom |
| --kbd-text | mono · #CFD3DA | Glyph colour |
| --kbd-plus | #565A62 | Chord join |
| --kbd-radius | 6px | Cap corner |
<kbd class="o-kbd">⌘</kbd> <span class="o-kbd-combo"> <kbd class="o-kbd">⌘</kbd><span class="o-kbd__plus">+</span><kbd class="o-kbd">K</kbd> </span>