# CommandItem

> One command in the command menu, with its icon and shortcut.

- **Level**: molecule · **Status**: stable · **Role**: navigation
- **Import**: `import { CommandItem } from "@rrios-forge/ui/molecules/command-item";`
- **Source**: `packages/ui/src/molecules/command-item`

Renders <div role="option"> for cmdk / listbox parents. The molecule never owns keyboard navigation or active-descendant state — the parent does. shortcut is a visual hint passed as a string and shown as quiet tertiary text, never a contract enforced by this row.

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `tone` | — | `neutral` `muted` | `neutral` | Which semantic colour family the element speaks in. |
| `intent` | — | `neutral` `danger` | `neutral` | What an action does. |
| `selected` | — | `true` `false` | `false` | Chosen in a set: the selected wash plus a non-colour cue (weight, check). |
| `disabled` | — | `true` `false` | `false` | Not available: dimmed, skipped by the keyboard, ignores the pointer. |

## Stories

- [Playground](/?path=/story/components-molecules-commanditem--playground) · frame: `/iframe.html?id=components-molecules-commanditem--playground&viewMode=story`
- [Selected](/?path=/story/components-molecules-commanditem--selected) · frame: `/iframe.html?id=components-molecules-commanditem--selected&viewMode=story`
- [With shortcut](/?path=/story/components-molecules-commanditem--with-shortcut) · frame: `/iframe.html?id=components-molecules-commanditem--with-shortcut&viewMode=story`
- [With badge](/?path=/story/components-molecules-commanditem--with-badge) · frame: `/iframe.html?id=components-molecules-commanditem--with-badge&viewMode=story`
- [Danger](/?path=/story/components-molecules-commanditem--danger) · frame: `/iframe.html?id=components-molecules-commanditem--danger&viewMode=story`
- [Command list](/?path=/story/components-molecules-commanditem--command-list) · frame: `/iframe.html?id=components-molecules-commanditem--command-list&viewMode=story`

## Decisions that name it

- ADR-030 — Axis vocabulary: one name, one meaning

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