# Kbd

- Page: https://jiguang132.com/resources/astryx/docs/kbd
- Resource: Astryx (https://jiguang132.com/resources/astryx.md)
- All guides: https://jiguang132.com/resources/astryx/docs.md

Renders a keyboard shortcut as styled key badges. Use Kbd in tooltips, menus, and help text to show key combinations.

## Installation

```bash
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](/resources/astryx/docs/getting-started).

## 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

```json
{
  "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

---

Index of all JGuang resources: https://jiguang132.com/llms.txt