A keycap, or a nested run of caps for a shortcut, rendered in the monospace token with a pressed-key inset.
CombinationSingle key
⌘ K ⌃ ⇧ P Esc
Press ⌘ K to search, or Esc to dismiss.
<Kbd keys={['⌘', 'K']} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Kbd } from '@chanrg/4ui';<Kbd keys={['⌘', 'K']} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
keys | string[] | — | Renders one cap per key. Takes precedence over children. |
children | Snippet | — | A single cap when keys is omitted, e.g. Esc. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
--4ui-surface-2 | Cap face. |
--4ui-border-strong | Cap edge and the inset that reads as depth. |
--4ui-font-mono | Keycap typeface. |
Accessibility
- Nested <kbd> is the standard markup for a combination: the outer element groups, each inner element is one physical key.
- The dividers between caps are decorative and hidden.