Primitive

Toolbar Control

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

Use ToolbarControl for clustered editing, filtering, and inspection commands. Use icon or subtle appearance for tools, and reserve chip appearance for true labeled toggle choices.

control

DOM render Image render

Toolbar ControlDefault

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

Grouped controls with tooltip and shortcut affordances.

Render state

Selected

Selected and keyboard-pressed states for mode controls.

Render state

Compact

Dense rail suitable for editors, inspectors, and composers.

Render state

Disabled

Disabled toolbar action inside an otherwise active group.

Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.

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

Concrete

Soft, powerful, compact UI vocabulary for AI-native software.

Rubric Labs

Shell

npm install @rubriclab/concrete

Catalog

Foundations Primitives Components

Render

Foundation render Primitive render Component render

Package

npm GitHub