Function: Toolbar()

Toolbar(__namedParameters): Element

Defined in: components/Toolbar/Toolbar.tsx:126

Groups controls that operate on content into a named region with arrow-key navigation — the utility group of the Action family (role="toolbar").

Entity = Structure → spacing: gap.inline.sm, the same rhythm every group in the family reads. It paints nothing.

Pick by what the set means:

• Toolbar — ambient operations on content (formatting, view controls, table actions). Announced as a named region, and the arrow keys walk it, so a long strip is quick to traverse.
• ButtonGroup — independent commitments (submit, cancel, delete). No region, no arrow keys, and the row collapses to a column when space runs out.
• ToggleButtonGroup — a selectable set (one/many of), where the engaged state is the value.

Keyboard, precisely: React Aria's useToolbar gives this a single tab stop with arrow-key navigation inside, APG's toolbar pattern. It does not manage any child's tabindex — it cannot, for arbitrary children — but on Tab it moves focus itself, generically (a DOM-walking focus manager, not a mechanism children opt into), to the toolbar's first/last tabbable descendant and lets the browser's own Tab action carry focus onward from there, so Tab in and out both land in one step regardless of which control had focus. Verified for a plain host <button> and an fsl-ui Select sitting beside fsl-ui triggers, not only for cooperating components (F-028).

Mixed controls are welcome: a Select for the font, ToggleButtons for the styles, a Separator between clusters. What makes it a toolbar is the region and its keyboard model, not the kind of control inside.

Chrome is composed, not built in. Whether a bar has a background depends on the surface it sits on — a bar on the page needs none, a floating one does — so wrap it in a Surface when you want chrome (ADR-014).

Give it an accessible name: an unnamed region is announced without telling the user what it operates on.

Parameters

Parameter	Type
__namedParameters	ToolbarProps

Returns

Element

Example

<Toolbar aria-label={formattingLabel}>
  <ToggleButton icon={<Icon intent="action.edit" />} aria-label={boldLabel} />
  <Separator orientation="vertical" />
  <ActionButton icon={<Icon intent="action.search" />} aria-label={findLabel} />
</Toolbar>

// With chrome, for a bar that floats above content
<Surface level="overlay" padding="sm">
  <Toolbar aria-label={formattingLabel}>…</Toolbar>
</Surface>