Kbd
Explore interactive examples and all component variations in our Storybook.
The Kbd component renders keyboard key labels in a visually distinct, monospaced style. It is useful for documenting shortcuts, showing hotkeys in UI hints, and building shortcut reference tables. It renders a native <kbd> element styled with a bordered, shadowed pill appearance.
Basic Usage
Keyboard Shortcuts
Combine multiple Kbd elements with + separators to express multi-key shortcuts.
Inline Usage
Kbd is an inline element and can be embedded directly inside paragraphs or tooltip content.
Press ⌘K to open the command palette and search for any action.
Use Tab and Shift+Tab to move focus between form fields.
Hit Escape at any time to dismiss the active dialog or popover.
To submit the form without a mouse, press Ctrl+Enter.
Shortcut Reference Table
Use Kbd to build structured shortcut references that users can quickly scan.
| Action | macOS | Windows / Linux |
|---|---|---|
| Save | ⌘+S | Ctrl+S |
| Undo | ⌘+Z | Ctrl+Z |
| Redo | ⌘+Shift+Z | Ctrl+Y |
| Find | ⌘+F | Ctrl+F |
| Cut | ⌘+X | Ctrl+X |
| Copy | ⌘+C | Ctrl+C |
| Paste | ⌘+V | Ctrl+V |
Properties
Kbd
| Property | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to merge with the default styles. |
children | ReactNode | — | The key label or content rendered inside the element. |
(All native kbd attributes) | — | — | All standard HTML <kbd> attributes are forwarded to the underlying element. |