PrimitivesStable

Kbd

Parity report: docs/atoms.md

A styled <kbd> (2px bottom border) for showing a key or a shortcut. size sm (default) or md. Compose several side by side for a shortcut (⌘ K).

When to use

  • Documenting a keyboard shortcut in a hint, a menu ("Search ⌘K"), a help page.
  • Showing an inline code snippet → a plain <code>. A code block → the showcase's own syntax highlighting.

Examples

A shortcut
⌘Kabrir busca
<span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}>
  <Kbd>⌘</Kbd>
  <Kbd>K</Kbd>
  <span>abrir busca</span>
</span>
Sizes
EscEsc
<Kbd size="sm">Esc</Kbd>
<Kbd size="md">Esc</Kbd>

Playground

K
size
<Kbd>K</Kbd>

Props

PropTypedefaultDescription
size"sm" | "md"sm`sm` (default) · `md`.

Accessibility

  • Uses the semantic <kbd> element. It's presentation only — the shortcut must actually be implemented in the component it documents.