Kbd
Preview appears after the next Storybook update.
<Kbd />When to use
Use it for
- Teaching a shortcut in a tooltip, a menu item, an empty state or help text.
- Inside an Input suffix to hint at the search shortcut.
Not for
- Code or token names: use code.
- Buttons: a Kbd is not clickable.
Do and don't
Every example is rendered with the real component, so it always matches what ships.
Write the platform's key names
Cmd on macOS, Ctrl elsewhere. Abbreviations get a title with the full name.
Long sequences
More than three keys is a recipe, not a shortcut. Explain it in text.
Accessibility
- Outer kbd wraps one kbd per key, the HTML pattern for keys pressed together; the plus signs are aria-hidden.
- Abbreviated keys (Cmd, Esc, arrows) carry a title with the full name.
- Text color is text.muted on surface (4.5:1).
Content guidelines
- Capitalize key names: Esc, Enter, Shift. Letters in capitals: K, not k.
- Say the action before the keys: "Search with Cmd K".
From the code Generated from the component, not editable here.
Anatomy and tokens
Read from packages/react/src/components/Kbd/Kbd.module.css at build time. Every value is a token: open one to see its alias chain in both themes.
- Combination container
.combo - Key
.key - sm
.sm .key - Separator
.plus
Motion and interaction
Kbd does not animate: its states change at once.
From the code Generated from the component, not editable here.
Props
Parsed from the TypeScript types in packages/react/src/components/Kbd/Kbd.tsx, so this table cannot drift from the code.
| Prop | Type | Default | Description |
|---|---|---|---|
keysrequired | string | string[] | none | One key ("Esc") or a combination (["Cmd", "K"]) pressed together. |
size | 'sm' | 'md' | 'md' | No description in the code yet. |
Playground
Change the props and see the real Kbd update. Controls are generated from the TypeScript props; nothing here changes the system.
<Kbd />Workbench
For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Kbd in Storybook).
Embed Storybook stories here (3)
Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.
Combination
SingleKey
AllStates
From the code Generated from the component, not editable here.
Changelog
- New
Data display: Card restyled as a flat plate with an
interactiveoption and padding sizes; Badge gainsappearance(subtle, now the default, or solid), a dot, icons and sizes (existing solid badges must passappearance="solid"to keep their look); new Avatar and AvatarGroup, Table (sortable headers with aria-sort, selectable rows, sticky header, focusable scroll region, useTableSort), Accordion, Tag (removable, toggleable), Divider and Kbdv1.0.0, Nov 11, 2026