69Kbd
A key, and sequences of keys. The key affordance is a 2px bottom border rather than a shadow — the same borders-not-depth rule as everything else, and it reads as a keycap because keycaps are lit from above.
Use it for
- Documenting a shortcut in help, a menu or a tooltip
- The editor and admin toolbars, which both have shortcuts and had no way to print one
Not for
- Code — that is
<code>; a kbd is a key the reader presses - Inventing shortcuts in docs that the product does not implement
Chord — pressed together
⌘+K
Ctrl+Shift+P
markup
<span class="ns-kbd-seq"><kbd class="ns-kbd">⌘</kbd><span class="ns-kbd-seq__sep">+</span><kbd class="ns-kbd">K</kbd></span>
<span class="ns-kbd-seq"><kbd class="ns-kbd">Ctrl</kbd><span class="ns-kbd-seq__sep">+</span><kbd class="ns-kbd">Shift</kbd><span class="ns-kbd-seq__sep">+</span><kbd class="ns-kbd">P</kbd></span>Sequence — pressed in turn
“then”, not “+”. The two are different instructions and must not look the same.
GthenD
markup
<span class="ns-kbd-seq"><kbd class="ns-kbd">G</kbd><span class="ns-kbd-seq__sep">then</span><kbd class="ns-kbd">D</kbd></span>Accessibility contract
- Real <kbd> elements, so the meaning survives with CSS off
- The separator is content, not a ::before — it says whether keys are pressed together or in sequence, which is not decoration