Kbd

18px height, r5 radius, 11px weight-500 label, inset 1px border.

Installation

npm install @crisp-ui-kit/crisp

Props

Examples

Single key

Shortcut combos

Render one Kbd per key — this is how Command shows each item's shortcut hint.

Inline with text

Kbd sits on the text baseline, so it reads naturally inside a sentence or next to a label.

Accessibility

Kbd renders a plain <span>, not the semantic <kbd> element, since it's used as a visual hint rather than a literal transcript of a key the user pressed. It carries no implicit ARIA role and is not focusable. When a Kbd is the only clue that a shortcut exists (e.g. floating next to a search field with no other label), give the surrounding control an aria-label or visible text that states the shortcut, since screen readers won't announce a bare ⌘K glyph meaningfully.