Kbd
A keyboard key symbol. Used in tooltips, menu items, and inline help text. Always mono, always small.
Usage
A single key, rendered as a small mono tile.
⌘ K / Enter Esc ⇧ ⌃ Tab
Combos
Combine multiple keys with the plus separator inside the same kbd.
⌘ K
⌘ ⇧ A
⌃ ⌥ ⇧ P
F12
In context
Where kbd actually appears in the product.
⌘K
New sale
⌘ N
Charge sale
F12
Anatomy
| Property | Value | Notes |
|---|---|---|
| padding | 3 × 7 px | 4 × 9 for combos |
| font | 500 11 / 1 mono | 12 for combos |
| bg | --surface-muted | — |
| border | 1 px --border | Optional |
| radius | 4 px | 5 for combos |
Do & don't
Do
Use platform-correct symbols. ⌘ on macOS, Ctrl on Windows.
Don't
Spell out "Command" or "Control" — the symbols are universally understood.
Do
Pair kbd with a menu label so users learn shortcuts as they work.
Don't
Use kbd for anything other than a keyboard key. Use a badge for status, a chip for filter.