Prepared Docs

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
`alignItems`	`AlignItems`	—	Controls cross-axis alignment of flex children. Maps to CSS `align-items`.
`attachBottom`	`boolean`	—	Removes bottom border-radius, making the box flush against the bottom edge.
`attachLeft`	`boolean`	—	Removes left border-radius, making the box flush against the left edge.
`attachRight`	`boolean`	—	Removes right border-radius, making the box flush against the right edge.
`attachTop`	`boolean`	—	Removes top border-radius, making the box flush against the top edge.
`background`	`Background`	—	Applies a semantic background color token to the box.
`basis`	`string`	—	Sets the initial main size of the flex item. Maps to CSS `flex-basis`.
`border`	`Border`	—	Applies a border style to all sides of the box.
`borderBottom`	`Border`	—	Applies a border style to only the bottom side.
`borderLeft`	`Border`	—	Applies a border style to only the left side.
`borderRadius`	`BorderRadius`	—	Sets the border radius using a design token.
`borderRight`	`Border`	—	Applies a border style to only the right side.
`borderTop`	`Border`	—	Applies a border style to only the top side.
`className`	`string`	—	Additional CSS class name(s) to apply to the box element.
`containerType`	`ContainerType`	—	Enables CSS container queries by setting the `container-type` property.
`display`	`Display.InlineFlex \| Display.Flex`	—	—
`elevation`	`Elevation`	—	Applies a box-shadow elevation level for depth/layering.
`exclusiveGroup`	`string`	—	Group name for mutually exclusive toolbars. When one becomes visible, others in the same group are dismissed.
`flexWrap`	`FlexWrap`	—	Controls whether flex items wrap onto multiple lines. Maps to CSS `flex-wrap`.
`floating`	`boolean`	`false`	When true, positions the toolbar as a floating overlay with animation.
`gap`	`Gap`	—	Spacing between child elements. Maps to CSS `gap`.
`grow`	`boolean`	—	When true, sets `flex-grow: 1` so the element expands to fill available space.
`inset`	`string \| number`	—	CSS offset from the positioned edge when floating. Accepts a number (pixels) or CSS string.
`justifyContent`	`JustifyContent`	—	Controls main-axis alignment of flex children. Maps to CSS `justify-content`.
`margin`	`Spacing`	—	Outer spacing around the box. Accepts a spacing token.
`onClick`	`MouseEventHandler<HTMLDivElement>`	—	Click handler forwarded to the underlying element (along with other DOM props in `...props`).
`onDismiss`	`(() => void)`	—	Callback fired when another toolbar in the same `exclusiveGroup` becomes visible.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	—	Keydown handler forwarded to the underlying element. Useful for div-based controls that need to respond to Enter/Space like a button.
`onPointerDown`	`PointerEventHandler<HTMLDivElement>`	—	Pointer down handler forwarded to the underlying element.
`overflow`	`Overflow`	—	Controls overflow behavior for content that exceeds the box dimensions.
`padding`	`Spacing`	—	Inner spacing within the box. Accepts a spacing token.
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the root `<div>` element.
`shrink`	`boolean`	—	When true, sets `flex-shrink: 1` so the element can shrink below its initial size.
`style`	`CSSProperties`	—	Inline styles applied directly to the box element.
`toolbarPosition`	`ToolbarPosition`	`ToolbarPosition.TopRight`	Placement of the toolbar when `floating` is true.
`visible`	`boolean`	`true`	Controls visibility of the toolbar. When false, the toolbar is hidden (animated out if floating).
`whiteSpace`	`WhiteSpace`	—	Controls the CSS `white-space` property for text wrapping behavior.
`zIndex`	`ZIndex`	—	Sets the CSS `z-index` stacking order using a design token.

Storybook

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

Floating Bottom Center

Floating With Custom Inset

All Positions

Exclusive Group

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

Floating bottom center

Floating with custom inset

All positions

View Source

Submit Issue

Name	Type	Default	Description
`alignItems`	`AlignItems`	—	Controls cross-axis alignment of flex children. Maps to CSS `align-items`.
`attachBottom`	`boolean`	—	Removes bottom border-radius, making the box flush against the bottom edge.
`attachLeft`	`boolean`	—	Removes left border-radius, making the box flush against the left edge.
`attachRight`	`boolean`	—	Removes right border-radius, making the box flush against the right edge.
`attachTop`	`boolean`	—	Removes top border-radius, making the box flush against the top edge.
`background`	`Background`	—	Applies a semantic background color token to the box.
`basis`	`string`	—	Sets the initial main size of the flex item. Maps to CSS `flex-basis`.
`border`	`Border`	—	Applies a border style to all sides of the box.
`borderBottom`	`Border`	—	Applies a border style to only the bottom side.
`borderLeft`	`Border`	—	Applies a border style to only the left side.
`borderRadius`	`BorderRadius`	—	Sets the border radius using a design token.
`borderRight`	`Border`	—	Applies a border style to only the right side.
`borderTop`	`Border`	—	Applies a border style to only the top side.
`className`	`string`	—	Additional CSS class name(s) to apply to the box element.
`containerType`	`ContainerType`	—	Enables CSS container queries by setting the `container-type` property.
`display`	`Display.InlineFlex \| Display.Flex`	—	—
`elevation`	`Elevation`	—	Applies a box-shadow elevation level for depth/layering.
`exclusiveGroup`	`string`	—	Group name for mutually exclusive toolbars. When one becomes visible, others in the same group are dismissed.
`flexWrap`	`FlexWrap`	—	Controls whether flex items wrap onto multiple lines. Maps to CSS `flex-wrap`.
`floating`	`boolean`	`false`	When true, positions the toolbar as a floating overlay with animation.
`gap`	`Gap`	—	Spacing between child elements. Maps to CSS `gap`.
`grow`	`boolean`	—	When true, sets `flex-grow: 1` so the element expands to fill available space.
`inset`	`string \| number`	—	CSS offset from the positioned edge when floating. Accepts a number (pixels) or CSS string.
`justifyContent`	`JustifyContent`	—	Controls main-axis alignment of flex children. Maps to CSS `justify-content`.
`margin`	`Spacing`	—	Outer spacing around the box. Accepts a spacing token.
`onClick`	`MouseEventHandler<HTMLDivElement>`	—	Click handler forwarded to the underlying element (along with other DOM props in `...props`).
`onDismiss`	`(() => void)`	—	Callback fired when another toolbar in the same `exclusiveGroup` becomes visible.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	—	Keydown handler forwarded to the underlying element. Useful for div-based controls that need to respond to Enter/Space like a button.
`onPointerDown`	`PointerEventHandler<HTMLDivElement>`	—	Pointer down handler forwarded to the underlying element.
`overflow`	`Overflow`	—	Controls overflow behavior for content that exceeds the box dimensions.
`padding`	`Spacing`	—	Inner spacing within the box. Accepts a spacing token.
`ref`	`Ref<HTMLDivElement>`	—	Ref forwarded to the root `<div>` element.
`shrink`	`boolean`	—	When true, sets `flex-shrink: 1` so the element can shrink below its initial size.
`style`	`CSSProperties`	—	Inline styles applied directly to the box element.
`toolbarPosition`	`ToolbarPosition`	`ToolbarPosition.TopRight`	Placement of the toolbar when `floating` is true.
`visible`	`boolean`	`true`	Controls visibility of the toolbar. When false, the toolbar is hidden (animated out if floating).
`whiteSpace`	`WhiteSpace`	—	Controls the CSS `white-space` property for text wrapping behavior.
`zIndex`	`ZIndex`	—	Sets the CSS `z-index` stacking order using a design token.