Kbd

A key or a keyboard shortcut, for help text, menus and the command palette.

Tier 1 · CSS only Native kbd preview

Example

Search everything with ⌘K (or CtrlK).

Move between options with ↑↓, choose with Enter, close with Esc.

Show the markup

<div class="demo-stack">
  <p class="demo-text">Search everything with <kbd class="kit-kbd">⌘</kbd><kbd class="kit-kbd">K</kbd> (or <kbd class="kit-kbd">Ctrl</kbd><kbd class="kit-kbd">K</kbd>).</p>
  <p class="demo-text">Move between options with <kbd class="kit-kbd">↑</kbd><kbd class="kit-kbd">↓</kbd>, choose with <kbd class="kit-kbd">Enter</kbd>, close with <kbd class="kit-kbd">Esc</kbd>.</p>
</div>

Usage

Press <kbd class="kit-kbd">⌘</kbd><kbd class="kit-kbd">K</kbd> to search.

One <kbd> per key. Show the platform's own keys where you can (⌘ on a Mac, Ctrl elsewhere).

Accessibility

Screen readers read symbols like ⌘ inconsistently. Where the shortcut matters, say it in words nearby or in an aria-label on the surrounding element ("Command K").
A shortcut is never the only way to do something.