Toolbar

A row of controls with arrow-key navigation.

Base UI ToolbarSource

Surfaces

Use raised on the window background, plain inside a card so there is no box in a box, and outlined in a Section or other flat region.

raised · on window
outlined · flat region
plain · in a card

Groups and separators

Toolbar.Group holds related buttons. Toolbar.Separator draws a line between groups. The arrow keys move focus between the controls.

With a menu

Pass Menu.Trigger to the render prop of Toolbar.Button. The button keeps a fill while its menu is open.

Vertical

Set orientation="vertical" to stack the controls. The up and down arrow keys then move focus, and separators are horizontal.

Insight canvas

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

  • A toolbar is one tab stop. The arrow keys move between its controls.
  • Use at most one Toolbar.Input, and put it last.
  • To open a popup, put its trigger in the render prop of Toolbar.Button. For a tooltip, do the opposite: <Tooltip.Trigger render={<Toolbar.Button />}>.

API

Props that the library adds. Every part also takes all the Base UI props.

Toolbar.Root

PropTypeDefaultDescription
appearance'plain' | 'outlined' | 'raised''raised'Sets the toolbar surface. Plain has no border or fill. Outlined adds a border. Raised adds elevation.