Toolbar

A high-quality, unstyled React toolbar component that groups a set of buttons and controls.

A container for grouping a set of buttons and controls.

Usage guidelines

To ensure that toolbars are accessible and helpful, follow these guidelines:

Use inputs sparingly: Left and right arrow keys are used to both move the text insertion cursor in an input, and to navigate among controls in horizontal toolbars. When using an input in a horizontal toolbar, use only one and place it as the last element of the toolbar.

Anatomy

Import the component and assemble its parts:

Anatomy

import { Toolbar } from '@base-ui/react/toolbar';

<Toolbar.Root>
  <Toolbar.Button />
  <Toolbar.Link />
  <Toolbar.Separator />
  <Toolbar.Group>
    <Toolbar.Button />
    <Toolbar.Button />
  <Toolbar.Group />
  <Toolbar.Input />
</Toolbar.Root>;

Examples

All Base UI popup components that provide a Trigger component can be integrated with a toolbar by passing the trigger to <Toolbar.Button> with the render prop:

Using popups with toolbar

return (
  <Toolbar.Root>
    <Menu.Root>
      <Toolbar.Button render={<Menu.Trigger />} />
      <Menu.Portal>
        {/* prettier-ignore */}
        {/* Compose the rest of the menu */}
      </Menu.Portal>
    </Menu.Root>
  </Toolbar.Root>;
)

This applies to <AlertDialog>, <Dialog>, <Menu>, <Popover>, and <Select>.

Unlike other popups, the toolbar item should be passed to the render prop of <Tooltip.Trigger>:

Using popups with toolbar

return (
  <Toolbar.Root>
    <Tooltip.Root>
      <Tooltip.Trigger render={<Toolbar.Button />} />
      <Tooltip.Portal>
        {/* prettier-ignore */}
        {/* Compose the rest of the tooltip */}
      </Tooltip.Portal>
    </Tooltip.Root>
  </Toolbar.Root>;
)

Using with NumberField

To use a NumberField in the toolbar, pass <NumberField.Input> to <Toolbar.Input> using the render prop:

Using NumberField with toolbar

return (
  <Toolbar.Root>
    <NumberField.Root>
      <NumberField.Group>
        <NumberField.Decrement />
        <Toolbar.Input render={<NumberField.Input />} />
        <NumberField.Increment />
      </NumberField.Group>
    </NumberField.Root>
  </Toolbar.Root>;
)

API reference

Root

Name	Type	Default	Description
`disabled`Optional	`boolean \| undefined`	—	—
`orientation`Optional	`ToolbarRoot.Orientation \| undefined`	`horizontal`	The orientation of the toolbar.
`loopFocus`Optional	`boolean \| undefined`	`true`	If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.

Button

Name	Type	Default	Description
`disabled`Optional	`boolean \| undefined`	`false`	When `true` the item is disabled.
`focusableWhenDisabled`Optional	`boolean \| undefined`	`true`	When `true` the item remains focuseable when disabled.

Input

Name	Type	Default	Description
`disabled`Optional	`boolean \| undefined`	`false`	When `true` the item is disabled.
`focusableWhenDisabled`Optional	`boolean \| undefined`	`true`	When `true` the item remains focuseable when disabled.
`defaultValue`Optional	`React.ComponentProps<'input'>['defaultValue'] \| undefined`	—	—

Group

Name	Type	Default	Description
`disabled`Optional	`boolean \| undefined`	`false`	When `true` all toolbar items in the group are disabled.

Toolbar

Usage guidelines

Anatomy

Examples

Using with Menu

Using with Tooltip

Using with NumberField

API reference

Root

Button

Input

Group

On this page