Primitive

Button

Tight command control with loading, icon, shortcut, and semantic states.

Buttons are short commands. Use hierarchy for priority, intent for semantic color, and density for rhythm.
control
DOM renderImage render
ButtonDefault

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

Variants, icon, and shortcut states.
Render state

Sizes

Tiny through large command sizing.
Render state

Signal

Ultra and destructive signal actions.
Render state

Pressed

Keyboard-triggered active affordance with highlighted keycaps.
Render state

Loading

Disabled pending command state.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
hierarchy'primary' | 'secondary' | 'soft' | 'ghost'secondaryCommand priority.
intent'neutral' | 'sky' | 'ultra' | 'danger'neutralCommand intent.
density'tiny' | 'small' | 'medium' | 'large'mediumControl height and type rhythm.
leadingIconIconName | ReactElement-Optional glyph before the label.
trailingIconIconName | ReactElement-Optional glyph after the label.
shortcutreadonly string[]-Keyboard hints rendered as Concrete keycaps.
pressedbooleanfalseTemporary active affordance for keyboard-triggered or programmatic button activation.
loadingbooleanfalseReplaces the leading slot with a spinner and disables the button.
iconOnlybooleanfalseLocks the button to a square icon control.