Kbd
A keycap: a small tint chip in the mono face that names a key or a shortcut. It is a label, not a control. Source: src/components/ui/kbd.tsx.
Keys
One key per Kbd. The cap is at least 20px wide, so single glyphs sit square and words grow from there.
⌘⇧KEscTabSpace
Combinations
KbdGroup sets a chord with a 4px gap. On macOS write the modifier glyphs with no separator; spell Ctrl out and join with + elsewhere.
⌘K⌘⇧PCtrl+Enter
With icon
A Tabler glyph inside a key renders at 12px unless you size it.
In a sentence
Keys sit on the text baseline, so a hint can name them mid-line.
Press / to search, ↑ ↓ to move and Enter to open.
In a button and a tooltip
A trailing shortcut in a search trigger, and a shortcut in a tooltip, where the key re-tints itself for the ink surface. Hover or focus the icon button.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| Kbd ...props | ComponentProps<"kbd"> | — | A 20px-tall tint keycap in the mono face. No variants or sizes; className merges last. It sets pointer-events: none, so it never steals a click from its parent. |
| KbdGroup ...props | ComponentProps<"div"> | — | Lays keys out with a 4px gap. It renders a <kbd> but is typed as a div: a known mismatch in the source. |
Best practices
When to use
- To teach a shortcut where the action lives: a menu item, a tooltip, a search trigger, an empty-state hint.
- Not for code or values; use InlineCode for those.
Behavior
- Kbd is display only. Wiring the shortcut is the caller's job; the key just documents it.
- Show the platform's own modifiers: ⌘ ⌥ ⇧ on macOS, Ctrl / Alt / Shift elsewhere.
Accessibility
- Glyphs such as ⌘ are read inconsistently. On the control itself, set aria-keyshortcuts ("Meta+K") so assistive tech gets the real chord.
- Icons inside a key take aria-hidden; pair them with the glyph or a word if the key must be read.
Content
- Letters uppercase (K, not k). Named keys in title case: Esc, Tab, Enter, Space.
- One chord per hint. Two alternatives read better as two lines than as a row of five keys.