Toolbar

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Toolbar renders a compact role="toolbar" flex row with alt background and border. Set floating with toolbarPosition and optional inset for overlay toolbars; visible toggles display with motion when floating. exclusiveGroup coordinates dismissal across multiple toolbars via a document event. ToolbarDivider separates icon buttons; ToolbarGroup re-exports ButtonGroup for merged controls.

Name	Type	Default	Description
`children`	`ReactNode`	—	Toolbar groups, separators, and items.
`aria-description`	`LocalizedMessage`	—	Extended description for assistive tech.
`aria-label`	`LocalizedMessage`	—	Accessible name when the visible label is insufficient.
`aria-labelledby`	`string`	—	Id of the element that names this toolbar; use {@link ToolbarLabelledByProps} instead. Id of the element that names this toolbar.
`aria-placeholder`	`LocalizedMessage`	—	Hint for an empty control.
`floating`	`boolean`	—	A positioned toolbar is floating; leave it unset to choose an axis. When true, absolutely positions the bar within the nearest positioned ancestor.
`initialItemId`	`string`	—	Item id that receives `tabIndex={0}` on the first render, including SSR, before items register in effects. Set this to the id of the first enabled {@link ToolbarItem } when a single tab stop is required in static markup.
`inset`	`ToolbarInset`	—	Inset from positioned edges when `floating`. Defaults to `4` (`--space-4`).
`label`	`LocalizedMessage`	—	Accessible name for the toolbar (`role="toolbar"`). Accessible name prop; use {@link ToolbarLabelProps} instead.
`loop`	`boolean`	—	When true, arrow keys wrap from last item to first and vice versa.
`orientation`	`ToolbarOrientation`	—	Collection axis. Defaults to {@link ToolbarOrientation.Horizontal}. Collection axis. A floating toolbar is always {@link ToolbarOrientation.Horizontal}.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the rendered toolbar element.
`title`	`LocalizedMessage`	—	Native tooltip; accessibility hint, not visible UI title text.
`toolbarPosition`	`ToolbarPosition`	—	Placement when `floating`. Defaults to {@link ToolbarPosition.TopRight}.
`variant`	`ToolbarVariant`	—	Transparent tray with no outer border or shadow. Required to choose a vertical axis. Surface look for the toolbar tray. Defaults to {@link ToolbarVariant.Floating}, which maps to the shipped overlay chrome until the floating elevation token syncs (see `CONTRACT.md`).

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

ToolbarDivider

Name	Type	Default	Description
`orientation`	`"horizontal" \| "vertical"`	`vertical`	Divider axis.

Basic

With divider

With buttons

Floating top right

Floating bottom center

Floating with custom inset

All positions

Toolbar / Usage

Toolbar / Accessibility

On this page

Floating bottom center

Floating with custom inset

All positions

Toolbar

API and Development

View SourceOpens in a new tab Submit IssueOpens in a new tab

Name	Type	Default	Description
`children`	`ReactNode`	—	Toolbar groups, separators, and items.
`aria-description`	`LocalizedMessage`	—	Extended description for assistive tech.
`aria-label`	`LocalizedMessage`	—	Accessible name when the visible label is insufficient.
`aria-labelledby`	`string`	—	Id of the element that names this toolbar; use {@link ToolbarLabelledByProps} instead. Id of the element that names this toolbar.
`aria-placeholder`	`LocalizedMessage`	—	Hint for an empty control.
`floating`	`boolean`	—	A positioned toolbar is floating; leave it unset to choose an axis. When true, absolutely positions the bar within the nearest positioned ancestor.
`initialItemId`	`string`	—	Item id that receives `tabIndex={0}` on the first render, including SSR, before items register in effects. Set this to the id of the first enabled {@link ToolbarItem } when a single tab stop is required in static markup.
`inset`	`ToolbarInset`	—	Inset from positioned edges when `floating`. Defaults to `4` (`--space-4`).
`label`	`LocalizedMessage`	—	Accessible name for the toolbar (`role="toolbar"`). Accessible name prop; use {@link ToolbarLabelProps} instead.
`loop`	`boolean`	—	When true, arrow keys wrap from last item to first and vice versa.
`orientation`	`ToolbarOrientation`	—	Collection axis. Defaults to {@link ToolbarOrientation.Horizontal}. Collection axis. A floating toolbar is always {@link ToolbarOrientation.Horizontal}.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the rendered toolbar element.
`title`	`LocalizedMessage`	—	Native tooltip; accessibility hint, not visible UI title text.
`toolbarPosition`	`ToolbarPosition`	—	Placement when `floating`. Defaults to {@link ToolbarPosition.TopRight}.
`variant`	`ToolbarVariant`	—	Transparent tray with no outer border or shadow. Required to choose a vertical axis. Surface look for the toolbar tray. Defaults to {@link ToolbarVariant.Floating}, which maps to the shipped overlay chrome until the floating elevation token syncs (see `CONTRACT.md`).