Kbd
stable llms.txtSemantic keyboard key and shortcut components. Use Kbd for individual keys and Shortcut to compose multi-key combinations.
Installation
bash
ts
Preset Configuration
Customize the appearance using presets
Examples
Explore different variations and use cases
Individual Keys
Use Kbd to represent a single keyboard key.
Shortcut — keys prop
Pass an array of keys to render a key combination.
Custom Separator
Override the default '+' separator with any string.
Manual Composition
Use the children slot for full control over the shortcut layout.
Inline Usage
Kbd and Shortcut can be embedded directly within prose text.
API Reference
Accessibility
- Uses semantic <kbd> HTML element for keyboard input
- Shortcut renders a <span> with an aria-label listing all keys
- Screen reader announces the full shortcut via aria-label
- Sufficient color contrast for key labels