Kbd
- Layer: Component
- Base: Park UI
kbdrecipe (no Ark primitive — semantic<kbd>element)
sm · md · lg
⌘⌘⌘
| Size | Use |
|---|---|
sm | Inline hints in body copy |
md | Default. Toolbars, hotkey rails |
lg | Empty-state CTAs, settings |
Hotkey composition
Section titled “Hotkey composition”Multi-key hotkey
⌘⇧K
Render each key as its own <Kbd> and lay them out with a small horizontal gap. The DS does not produce ”⌘+K” as a single glyph — that semantic belongs to the consumer’s layout.
Plane 1 Constraints
Section titled “Plane 1 Constraints”No glow, no drop shadow. The semantic <kbd> element relies on the recipe’s muted background and border only.
Accessibility
Section titled “Accessibility”<kbd> is the native semantic element for keyboard input; screen readers announce it as “keyboard”. Use the glyph the user will see on their keyboard (⌘, ⇧) or the canonical key name (Enter, Space) — avoid spelled-out synonyms.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Glyph size |
children | JSX.Element | required | Key label / glyph |