Components / Display & Media / Kbd

Kbd beta

Keyboard keys as small cast pieces: a bottom edge, mono type, nothing else.

Preview

Press ⌘ K to search, ⌘ ⇧ P for commands.

Move with ← →, confirm with Enter, close with Esc.

<div style="display:grid;gap:14px;font-size:13.5px;color:var(--k-ink-2)">
  <p>Press <kbd class="k-kbd">⌘</kbd> <kbd class="k-kbd">K</kbd> to search, <kbd class="k-kbd">⌘</kbd> <kbd class="k-kbd">⇧</kbd> <kbd class="k-kbd">P</kbd> for commands.</p>
  <p>Move with <kbd class="k-kbd">←</kbd> <kbd class="k-kbd">→</kbd>, confirm with <kbd class="k-kbd">Enter</kbd>, close with <kbd class="k-kbd">Esc</kbd>.</p>
</div>

/* KATA Kbd */
.k-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;border:1px solid var(--k-line);border-bottom-width:2px;border-radius:6px;background:var(--k-bg-soft);color:var(--k-ink-2);font-family:var(--k-mono);font-size:11px;font-weight:500;line-height:1}

Usage

In menus, tooltips and empty states to teach shortcuts. Use symbols (⌘ ⇧ ⌥) on Apple platforms, words (Ctrl, Alt) elsewhere.

Accessibility

Wrap the key in <kbd> so it is announced as keyboard input. A shortcut hint never replaces a visible label for the action itself.

Heatmap

Line Chart