Skip to main content
Kbd
ImplementedKeyboard key indicator — 20×20 with monospace font, 1px border, 4px radius. Used in shortcuts hints.
Categoryatoms
Source
patterns/atoms/kbd.htmlAI HintKeyboard-key glyph (kbd element) in sm/md for shortcut hints and input adornments. Presentational by design — pair it with visible text that names the shortcut.
Keyboard shortcut indicator with platform-aware glyphs. FR-CA: Indicateur de raccourci clavier.
Kbd
Display atom (Family 2 — Tier 1, placeholder)
Tier-1 placeholder. Production component ships in DS-313.
Recherche :CtrlK⌘K
Palette de commandes :Ctrl⇧P
Fermer :Échap
Soumettre :Entrée
This component supports light and dark mode.
Status
Tier-1 placeholder. Production Kbd ships in DS-313.
Intended API
import { Kbd } from '@epasslive/design-system'
<Kbd combo="Ctrl+K" platform="win" />
<Kbd combo="Cmd+K" platform="mac" />
<Kbd combo="Ctrl+Shift+P" ariaLabel="Palette de commandes" />Accessibility
Each token is a native <kbd> element so assistive tech announces "Control plus K" naturally.
Props
Prop
Type
Default
Description
combostringCtrl+KCombo string with + separators.
platform'mac' | 'win' | 'any'anyPlatform-aware glyph override.
ariaLabelstring—
French description announced to assistive tech.
Props
Preview
Kbd
Prop
Type
Required
Default
Description
childrenReact.ReactNodeRequired
—Key label: '⌘', 'Shift', 'K', 'Enter'
size"sm" | "md"Optional
'md'Visual size preset.
Quick use:
<Kbd />Accessibility
ARIA rolepresentation (decorative)
render
1 ruleARIA
1 ruleUsage
Import
tsxSnippet
import { Kbd } from "@epasslive/design-system"Example 1
tsxSnippet
<Kbd />Example 2
tsxSnippet
<Kbd variant="default" />Anti-patterns
— Do not compose atoms directly — use molecules instead
— Avoid inline styles on atoms