Toolbar | Glaze design system

Sizes

When to use it

Use: Three or more actions on one thing: copy, retry and edit under an answer; run, export and wrap over an output.
Use: On or off settings for a view beside its actions (ToolbarToggle).
Use: A row that should be one tab stop, with the arrow keys inside it.
Not for: One or two actions; put Buttons side by side. Use Button.
Not for: Previous and next, or actions joined into one pill. Use Button group.
Not for: One view of several. Use Segmented control.
Not for: Actions on selected rows. Use Bulk action bar.
Not for: Site navigation: use links in a nav.

8 rules

Must: Name the Toolbar with aria-label for the thing its items act on. Because a screen reader announces "toolbar" alone, and two on one screen cannot be told apart.
Must: Give an iconOnly item an aria-label that says the action. Because an icon item has no text, so it is announced as "button" with no name.
Must: Give a toolbar at most one variant="primary", "confirm" or "destructive" item, at the end; leave the rest ghost. Because the toolbar is one group of actions, and two glass pills in it split the eye.
Must: Use ToolbarToggle for an on or off setting; never a ToolbarButton that changes its own look. Because the toggle sets aria-pressed and the pressed wash, and a button restyled by hand is announced as a plain button.
Never: Put glass on a pressed ToolbarToggle. Because a pressed toggle is a thing you have your hand on, which takes the pressed wash; glass marks a value chosen inside a control or the one lead.
Never: Draw a track, a border or a fill around the toolbar. Because Glaze toolbars are flat, and a grey track reads as a segmented control.
Should: Split items into ToolbarGroups with a ToolbarSeparator between kinds: actions, then settings.
Should: Keep it to about eight items; move the rest into a Dropdown menu behind a More item. Because the row never wraps, so items past the edge scroll out of sight.

6 states, highest first

4 checks

: role="toolbar" named by aria-label; one Tab stop, arrow keys move between items, Home and End go to the ends.
: A toggle reports aria-pressed; the wash is not the only sign.
: Focus is the 2px ink ring on the item; the toolbar keeps 4px of room so a scrolling row never clips it.
: Arrow keys follow the reading direction in right to left.

4 keys

5 edge cases

Wider than its container: Scrolls sideways with no bar; items never wrap.
Disabled item: Turns grey and stays focusable, so arrow keys keep their place.
Pending item: Shows the arc at its size and refuses presses; the other items stay live.
Toolbar on the shell footer: Ghost items wash on the grey; pass size="sm" to match the footer's 26px actions.
Dark theme: The wash turns light; a primary turns to light glass with an ink label.

7 props

Toolbar size: 'default' | 'sm' default 'default'
Toolbar orientation, loopFocus, aria-label: Base UI Toolbar.Root default 'horizontal', true
ToolbarButton variant: 'ghost' | 'secondary' | 'primary' | 'confirm' | 'destructive' default 'ghost'
ToolbarButton iconOnly, pending: boolean default false
ToolbarToggle pressed, defaultPressed, onPressedChange: Base UI Toggle
ToolbarGroup disabled: boolean default false
ToolbarSeparator: Base UI Toolbar.Separator

11 tokens