Kbd
Keyboard key display.
import { Kbd } from '@ybouhjira/hyperkit';#Playground
Edit the code — the preview recompiles and re-renders as you type.
Loading preview…
#More Examples
Multiple Keys
<Kbd keys={[ '⌘', 'Shift', 'P' ]} />Enter
<Kbd>Enter</Kbd>#Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | JSX.Element | — | Content to render as a single key. |
keys | string[] | — | Array of key names to render as a keyboard shortcut (e.g., ['Ctrl', 'C']). |
class | string | — | Additional CSS classes. |
#Design Tokens
This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.
--sk-bg-tertiary--sk-border-subtle--sk-font-mono--sk-font-size-xs--sk-radius-sm--sk-space-lg--sk-space-px--sk-space-xs--sk-text-muted--sk-text-secondary