CatalystKbdv1.1.2Ready for Production
Display keyboard shortcuts and key combinations with semantic styling. Built on the native HTML kbd element with CVA variants for size, danger state, and decorative vs. text rendering.
Prefer AI-assisted development?
Catalyst Kbd wraps the native <kbd> HTML element with built-in design tokens and CVA size/variant options — giving you a production-ready keyboard shortcut component with dark mode and danger state support out of the box.
Installation
npm install @pmi/catalyst-kbdimport { Kbd } from '@pmi/catalyst-kbd';Variants
Decorative (default)
Renders with a border and background to visually stand out as a key badge.
Text
A minimal variant without borders or background — useful inside menus or inline prose.
Sizes
Three sizes are available: sm, md (default), and lg.
Common Patterns
Danger
Use the danger prop to signal a destructive keyboard action (e.g., Delete, Backspace).
Danger on Hover
Dynamically apply danger colors based on a parent's highlighted state using Tailwind group utilities.
API Reference
Kbd
A styled <kbd> element. Forwards ref to the underlying HTMLElement. Accepts all standard HTML keyboard element attributes.
Prop
Type
Accessibility
The <kbd> element is semantic HTML — screen readers announce it as keyboard input automatically.
ARIA
- No explicit ARIA roles are needed. The native
<kbd>element conveys keyboard input semantics to assistive technology. - Ensure color contrast meets WCAG 2.2 AA (4.5:1) when using custom
classNameoverrides — the default tokens already comply. - When
dangeris used purely as a color signal, pair it with a text label or tooltip so color-blind users can still identify the destructive intent.
Choosing the Right Component
Use Kbd when you need to display a keyboard shortcut or key combination. Reach for a different primitive when:
| If you need… | Use instead |
|---|---|
| A label for status, category, or count | Badge |
| A searchable command palette that lists keyboard shortcuts | Command |
| A non-interactive text snippet styled as code | Standard <code> element |
Related
Command
A fast, composable command menu component for keyboard-driven navigation and search, built on cmdk primitives.
Map
Interactive map component for visualizing geographic data with markers, popovers, and zoom controls. Built on react-simple-maps with customizable geographies and Catalyst design tokens.