# Kbd

> A keyboard shortcut, set as keys — like the ⌘K that opens search.

- **Level**: atom · **Status**: stable · **Role**: status
- **Import**: `import { Kbd } from "@rrios-forge/ui/atoms/kbd";`
- **Source**: `packages/ui/src/atoms/kbd`

Keyboard-key glyph. Renders a `<kbd>` element styled as a key cap. Use for shortcuts in command palettes, tooltips and onboarding copy. For combos pass `keys` (`<Kbd keys={["⌘", "K"]} />`): one cap per key, side by side, no `+` between them.

## Use it for

- Text / heading / helper / code / shortcut → `Text` / `Heading` / `Description` / `Code` / `Kbd`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` | `sm` | Ergonomic scale, in three families (control, text, container). |

## Stories

- [Playground](/?path=/story/components-atoms-kbd--playground) · frame: `/iframe.html?id=components-atoms-kbd--playground&viewMode=story`
- [Sizes](/?path=/story/components-atoms-kbd--sizes) · frame: `/iframe.html?id=components-atoms-kbd--sizes&viewMode=story`
- [Combos](/?path=/story/components-atoms-kbd--combos) · frame: `/iframe.html?id=components-atoms-kbd--combos&viewMode=story`
- [In context](/?path=/story/components-atoms-kbd--in-context) · frame: `/iframe.html?id=components-atoms-kbd--in-context&viewMode=story`

## Decisions that name it

- ADR-009 — Editorial Frame: PageShell v3 + new `TopBar` molecule

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).