Kbd
Renders a keyboard shortcut as styled key badges. Use Kbd in tooltips, menus, and help text to show key combinations.
Installation
npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0
Requires React 19+, base CSS and a Theme provider. See Setup.
Kbd
Renders a keyboard shortcut as styled key badges. Use Kbd in tooltips, menus, and help text to show key combinations.
| Prop | Type | Default | Description |
|---|---|---|---|
| keys * | string | Keyboard shortcut string. Use "+" to separate keys. Special keys: mod (Cmd on Mac), ctrl, alt, shift, enter, backspace, escape, tab, up, down, left, right, plus. Aliases: esc for escape and return for enter. | |
| xstyle | StyleXStyles | StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}. | |
| className | string | CSS class name for the root element. Prefer xstyle for styling; className is provided for integration with non-StyleX systems. | |
| style | CSSProperties | Inline styles for the root element. Prefer xstyle for styling; inline styles bypass StyleX optimization. |
Usage guidance
- Place shortcuts near the action they trigger: in a tooltip, menu item, or inline instruction.
- Use mod instead of ctrl or cmd; it automatically adapts to the user's platform.
- Avoid: Use Kbd as the only way to discover an action; shortcuts should supplement visible controls, not replace them.
Theming API
{
"targets": [
{
"className": "astryx-kbd"
}
]
}
Anatomy
- Shortcut: Group that presents the complete keyboard shortcut and its accessible name.
- Key badge: Painted key badge rendered once for each key in the shortcut.
Examples
- Kbd:
- Kbd — Inline Instructions: Keyboard shortcuts rendered inline within instructional text
- Kbd — Menu Shortcuts: Menu-style list pairing action labels with their keyboard shortcuts
- Kbd — Modifier Combinations: Modifier combinations and special keys rendered as shortcut badges