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}.
`overflowGlyph`	`Glyph`	—	Glyph for the overflow control. Defaults to `more-horizontal`. AppShell's compact header uses `more-vertical` (TB-16).
`overflowLabel`	`LocalizedMessage`	—	Turns on the overflow menu and names its control (TB-16). When the horizontal toolbar is too narrow for its items, the trailing items that have an `overflowItem` move into a menu behind an icon-only "more" control named by this label, which stays the toolbar's last item. Leave it unset and items never move. A vertical toolbar ignores it.
`overflowMenuOnly`	`boolean`	—	When true, every item with an `overflowItem` stays in the menu and only the overflow control shows in the bar. The control stays visible even when the bar is wide enough to show every item (TB-16).
`overflowSize`	`ButtonSize`	—	Size of the overflow control, to match the toolbar's items. Defaults to the Button default.
`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.

@prepared911/ui overflow menu

Set overflowLabel (LocalizedMessage) to add a trailing icon-only "more" control (more-horizontal glyph, aria-haspopup="menu"). Optional overflowSize matches the bar's button size. Ignored on a vertical toolbar (development warning; TB-16). On ToolbarItem, overflowItem is the row in the menu (MenuItem, MenuCheckboxItem, or MenuSub). An item without one stays in the bar, and so do earlier items.

Toolbar / Usage

Toolbar / Accessibility

On this page

Floating bottom center

Floating with custom inset

All positions

@prepared911/ui Popover and Menu triggers

@prepared911/ui overflow menu

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}.
`overflowGlyph`	`Glyph`	—	Glyph for the overflow control. Defaults to `more-horizontal`. AppShell's compact header uses `more-vertical` (TB-16).
`overflowLabel`	`LocalizedMessage`	—	Turns on the overflow menu and names its control (TB-16). When the horizontal toolbar is too narrow for its items, the trailing items that have an `overflowItem` move into a menu behind an icon-only "more" control named by this label, which stays the toolbar's last item. Leave it unset and items never move. A vertical toolbar ignores it.
`overflowMenuOnly`	`boolean`	—	When true, every item with an `overflowItem` stays in the menu and only the overflow control shows in the bar. The control stays visible even when the bar is wide enough to show every item (TB-16).
`overflowSize`	`ButtonSize`	—	Size of the overflow control, to match the toolbar's items. Defaults to the Button default.
`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`).