Kbd
Displays a keyboard key or shortcut
Category: display · WCAG 2.2-AA · keyboard, shortcut, hotkey
Sizes
- sm
- md
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
Design tokens
--cascivo-color-text-subtle--cascivo-color-surface-raised--cascivo-color-border--cascivo-color-border-strong--cascivo-radius-sm
When to use
- Showing a keyboard key or shortcut the user should press
- Documenting hotkeys in menus, tooltips, or help text
When not to use
- Inline code, commands, or identifiers — use Code
- A short label that is not a key press — use Badge or Text
How to build an accessible Kbd in React →
Examples
Single key
<Kbd>⌘</Kbd>Shortcut
Compose multiple keys to show a shortcut
<span><Kbd>⌘</Kbd> + <Kbd>K</Kbd></span>Small
<Kbd size="sm">Esc</Kbd>Related components
- Code — Code marks literal code; Kbd marks keys to press