Button

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

Buttons are short commands. Use primary for the one dominant action, sky for pointer moments, ultra for upgrade/pro moments, and danger only for destructive actions.

DOM render JPEG render

Playground

Props in the URL.

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

Loading playground.

States

Rendered matrix.

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

Default

Variants, icon, and shortcut states.

/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

Props

Public contract.

Name	Type	Default	Description
`variant`	`'primary' \| 'secondary' \| 'soft' \| 'ghost' \| 'sky' \| 'sky-soft' \| 'ultra' \| 'danger'`	`secondary`	Visual role of the command.
`size`	`'tiny' \| 'small' \| 'medium' \| 'large'`	`medium`	Control height and type rhythm.
`leadingIcon`	`IconName \| ReactElement`	-	Optional glyph before the label.
`trailingIcon`	`IconName \| ReactElement`	-	Optional glyph after the label.
`shortcut`	`readonly string[]`	-	Keyboard hints rendered as Concrete keycaps.
`pressed`	`boolean`	`false`	Temporary active affordance for keyboard-triggered or programmatic button activation.
`loading`	`boolean`	`false`	Replaces the leading slot with a spinner and disables the button.
`iconOnly`	`boolean`	`false`	Locks the button to a square icon control.