Toolbar

The Toolbar component groups related interactive elements together. It follows the ARIA Toolbar pattern for reducing the number of tab stops.

Use the render prop of the Toolbar.Item component to display individual items within the toolbar.

Examples

Divider

Use the Divider component to visually and semantically separate groups of items within the toolbar.

Divider orientation

The divider should be perpendicular to the Toolbar. Reorientate it when changing the Toolbar’s orientation.

Orientation

By default, the Toolbar is horizontal. Use the orientation prop to change it to vertical.

Additionally, adjust the Tooltip’s placement to avoid overlapping the Toolbar, and change the Divider’s orientation to make it perpendicular to the Toolbar.

In the example above, labelPlacement="right" is set on IconButtons and the Divider retains its default horizontal orientation.

ToggleButton

In the example below, one of the toolbar items is rendered as a ToggleButton.

Menu

In the example below, the toolbar item for selecting the font family is using a Menu. The MenuItems are selectable and use role="menuitemradio", since only one font family can be selected at a time.