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

@prepared911/ui Popover and Menu triggers

In @prepared911/ui, put ToolbarItem outside PopoverTrigger or MenuTrigger, with the Popover or Menu root wrapping both the item and its content. PopoverTrigger and MenuTrigger forward roving props from the item to the control child, so each trigger is one toolbar item with a single tab stop.

Toolbar / Usage

Toolbar / Accessibility

On this page

Floating bottom center

Floating with custom inset

All positions

@prepared911/ui Popover and Menu triggers

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`).