Toolbar

Toolbars group related actions in a docked or floating container.

Developer experience

Compose IconButton children or pass actions for a data-driven action group.
maxVisible moves the remaining actions into an automatic overflow menu; responsive derives the visible count from the toolbar width.
more customizes the default overflow trigger and renderMore replaces its visual rendering while keeping the menu behavior.
The generated overflow menu chooses above/below or left/right from the toolbar orientation and the trigger's viewport half; morePosition can force a placement.
Descendant IconButton controls keep rounded press feedback in floating toolbars.
Use variant="floating" for a compact surface and orientation="vertical" for a vertical action group.

Renders role="toolbar" and applies aria-orientation="vertical" for vertical layouts.
The overflow trigger has an accessible label and the generated menu uses the labels from each action.
Provide accessibleLabel or an aria-labelledby reference to name the toolbar; label each child control according to its own component API.

actions and children are alternative content modes; actions takes precedence.
The toolbar does not implement roving focus or arrow-key navigation for its direct children. The overflow menu owns menu-item keyboard navigation.
Composition children remain consumer-owned; use IconButton size="small" for the 48dp toolbar slots shown in the Material 3 design.

React props
Name	Type	Required	Default	Description
`className`	`string \| ClassNameComponent<ToolbarInterface> \| Partial<Record<"toolbar", string>>`	No	`—`	Root classes (string), static element classes (object), or state-aware element classes (function).
`color`	`ToolbarColor`	No	`'standard'`	Container color treatment.
`variant`	`ToolbarVariant`	No	`'docked'`	Container presentation.
`orientation`	`ToolbarOrientation`	No	`'horizontal'`	Layout axis for the toolbar's children.
`accessibleLabel`	`string`	No	`—`	Accessible name applied to the toolbar container. Prefer this prop for cross-framework parity; `aria-labelledby` remains available through the framework's native attributes.
`maxVisible`	`number`	No	`—`	Maximum number of non-pinned actions shown in the toolbar.
`responsive`	`boolean`	No	`false`	Measures the toolbar and reserves one action slot for overflow when needed.
`itemWidth`	`number`	No	`48`	Estimated width of one action slot when `responsive` is enabled.
`more`	`ToolbarMoreProps`	No	`—`	Presentation options for the automatically rendered overflow trigger.
`morePosition`	`AnchorPosition`	No	`'auto'`	Position of the generated overflow menu relative to the More trigger. `auto` follows the toolbar orientation and the trigger's viewport half.
`onMoreOpenChange`	`(open: boolean) => void`	No	`—`	Notifies consumers when the generated overflow menu opens or closes.
`renderMore`	`(props: ReactToolbarMoreRenderProps) => ReactNode`	No	`—`	Replaces the default overflow trigger while retaining the overflow menu.