Kbd
Displays a keyboard key or key combination. Renders with a sunken border style to mimic physical keyboard keys.
Single Keys
EnterEscTab
<Kbd>Enter</Kbd>
<Kbd>Esc</Kbd>
<Kbd>Tab</Kbd>Modifier Combinations
Ctrl+SCmd+Shift+PAlt+F4
<Kbd keys={["Ctrl", "S"]} />
<Kbd keys={["Cmd", "Shift", "P"]} />
<Kbd keys={["Alt", "F4"]} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
keys | string | string[] | — | A single key string or array of key strings to render as a key combination with + separators. |
children | React.ReactNode | — | Content to display inside a single key indicator. Used when keys prop is not provided. |
className | string | — | Additional CSS classes to apply to the kbd element. |