Kbd
A semantic keycap for keyboard shortcuts and individual key names.
Use Kbd to supplement a visible command with its keyboard shortcut. Do not use it as the only label for an action or to imply that an unavailable shortcut works.
Installation
The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/kbd.tsx.
Usage
<span className="inline-flex items-center gap-2">
Search
<Kbd meta>K</Kbd>
</span>Modifier props render platform-appropriate labels. meta displays Command on Apple platforms and Ctrl elsewhere, while alt displays Option on Apple platforms and Alt elsewhere.
Static Kbd renders a semantic <kbd> element. Passing onClick renders a native <button type="button"> with hover and keyboard-focus states. Prefer a regular Button for primary actions.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "md" | Sets the compact inline or shortcut-hint size. |
| meta | boolean | false | Adds the platform Meta modifier. |
| ctrl | boolean | false | Adds the platform Control modifier. |
| alt | boolean | false | Adds the platform Alt or Option modifier. |
| shift | boolean | false | Adds the Shift modifier. |
| onClick | (event) => void | - | Makes the keycap an operable button. |
Kbd also accepts native attributes for the element it renders.
Accessibility
- Pair shortcuts with a visible action label so people do not have to infer a command from symbols alone.
- Only show shortcuts that are currently available in the interface.
- Static keycaps are not focusable. Interactive keycaps use native button keyboard behavior.
- Interactive keycaps keep their compact visual geometry while exposing a 24 pixel pointer floor and a 44 pixel coarse-pointer target. Use Button when the action needs stronger visual emphasis.
- Treat platform-specific modifier text as a display aid, not as the implementation of the shortcut itself.