Search for a command to run...
Tiny keycap that shows a keyboard shortcut. Compose multiple inside `KbdGroup` to indicate chords like `⌘ K`.
Press⌘Kto open the command palette.
The keycap chrome is identical inside and outside an InputGroup. Inside a
TooltipContent (an inverted bubble — dark in light mode, light in dark mode)
the kbd inverts with it via sand-1 alpha + text-fg-inverted — no extra
props needed.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Key label. A single character, glyph (⌘, ⇧), or icon — see icons. |
className | string | — | Additional classes. The keycap chrome is set via component-level data-slot selectors. |
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | One or more <Kbd> elements representing a chord (e.g. ⌘ ⇧ K). |
className | string | — | Additional classes. Defaults to a tight gap-1 horizontal flex row. |
Use KbdGroup for any chord — two or more keys pressed together — so the keys share spacing
and align as one unit.
Prefer FA icons for modifier keys (CommandIcon, ShiftKeyIcon, NavigateKeyIcon) over the
Unicode glyphs (⌘, ⇧, ↑↓) — they render consistently across platforms and never fall
back to a system font.
Place a kbd inside an InputGroupAddon (with align="inline-end") to hint at the
keyboard shortcut that opens or focuses that input.
Use a kbd inside a TooltipContent to confirm the shortcut that triggers the same action as
the tooltip's button.
Match real keys: show the Mac glyph (⌘) on Mac and the literal "Ctrl" on Windows when you
can detect the platform.
Use <Kbd> for inline code or token names — that's what <code> is for. Kbd is reserved for
keys the user actually presses.
Stuff multi-character labels into a single key (<Kbd>↑↓</Kbd>). Either use one key per
glyph or a single FA icon like NavigateKeyIcon.
Wrap a kbd in a button. The kbd is a label, not an interactive target — pointer-events
are intentionally inherited so the surrounding control owns the click.
Override bg, border, or text on a kbd to fake a different state. The keycap chrome
(sand-10 alpha + heavy bottom border) is part of the system; if a surface needs a different
chip, use Badge.