Primitive

Option row

Reusable button row for command menus and selectable listbox options.

OptionRow owns dense option-row DOM, icon/copy/aside slots, active/selected states, and command or select row sizing. Parent components own filtering, active-index movement, and selection state.
control
DOM renderImage render
Option rowDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Active command, selected value, disabled, and destructive rows.
Render state

Command

Command row with icon, description, and shortcut.
Render state

Select

Selectable option row with meta and selected state.
Render state

Danger

Destructive command treatment.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
kind'command' | 'select'selectRow density and slot treatment.
children *ReactNode-Visible row label.
descriptionReactNode-Optional secondary copy.
leadingIconIconName-Optional leading glyph.
metaReactNode-Optional right-side metadata.
activebooleanfalseCommand active highlight.
selectedbooleanfalseSelected option highlight.
intent'default' | 'error' | 'sky' | 'terminal' | 'ultra'defaultSemantic command intent.