Toolbar

Atomic toolbar with quiet icon controls, optional chip appearance, tooltip shortcuts, roving arrow-key focus, selected state, and pressed feedback.

Toolbar is for quiet clustered controls. Use icon or subtle appearance for tools, and reserve chip appearance for true labeled toggle choices.

Playground

Props in the URL.

Controls update query params directly. Complex slots use curated fixtures so component states stay deterministic, linkable, and screenshot-ready.

Loading playground.

States

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

Default

Grouped controls with tooltip and shortcut affordances.

Selected

Selected and keyboard-pressed states for mode controls.

Compact

Dense rail suitable for editors, inspectors, and composers.

Props

Name	Type	Default	Description
`label`	`string`	`Toolbar`	Accessible toolbar label.
`compact`	`boolean`	`false`	Tightens the rail for dense product surfaces.
`ToolbarButton.appearance`	`'icon' \| 'subtle' \| 'chip'`	`icon`	Visual role for the control.
`ToolbarButton.icon`	`IconName`	-	Optional tool glyph.
`ToolbarButton.shortcut`	`readonly string[]`	-	Tooltip or inline shortcut hints.
`ToolbarButton.tooltipPlacement`	`'top' \| 'right' \| 'bottom' \| 'left'`	`top`	Tooltip placement for cramped surfaces.
`ToolbarButton.selected`	`boolean`	`false`	Persistent selected mode state.
`ToolbarButton.defaultSelected`	`boolean`	`false`	Initial selected state for uncontrolled toggle chips.
`ToolbarButton.toggleable`	`boolean`	`false`	Allows click to update uncontrolled selected state.
`ToolbarButton.onSelectedChange`	`(selected: boolean) => void`	-	Back-propagates local toggle state for controlled toolbars.
`ToolbarButton.pressed`	`boolean`	`false`	Transient keyboard activation state.
`ToolbarButton.showLabel`	`boolean`	-	Shows the label beside the icon. Defaults to true only for chip appearance or text-only controls.
`children`	`ReactNode`	-	Toolbar groups, buttons, and separators.