Toolbar

Toolbar can be used to group related options. To emphasize groups of related icon buttons, a toolbar should share a common container.

Design guidelines

Usage

Best practices

Toolbars should:

• Clearly communicate that clicking or tapping will trigger an action.
• Use established colors appropriately. For example, only use red for actions that are difficult or impossible to undo.
• When used with a block, have a consistent location above the block. Otherwise, have a consistent location in the interface.

States

Active and available toolbars

A toolbar’s state makes it clear which icon button is active. Hover and focus states express the available selection options for icon buttons in a toolbar.

Disabled toolbars

Toolbars that cannot be selected can either be given a disabled state, or be hidden.

Development guidelines

Usage

import { Toolbar, ToolbarButton } from '@wordpress/components';
import { formatBold, formatItalic, link } from '@wordpress/icons';

function MyToolbar() {
    return (
        <Toolbar label="Options">
            <ToolbarButton icon={ formatBold } label="Bold" />
            <ToolbarButton icon={ formatItalic } label="Italic" />
            <ToolbarButton icon={ link } label="Link" />
        </Toolbar>
    );
}

Props

Toolbar will pass all HTML props to the underlying element. Additionally, you can pass the custom props specified below.

className: string

Class to set on the container div.

• Required: No

label: string

An accessible label for the toolbar.

• Required: Yes

variant: 'unstyled' | undefined

Specifies the toolbar’s style.

Leave undefined for the default style. Or 'unstyled' which removes the border from the toolbar, but keeps the default popover style.

• Required: No
• Default: undefined

orientation: 'horizontal' | 'vertical'

Specifies the toolbar’s orientation.

Leave undefined or ‘horizontal’ for horizontal orientation keyboard interactions, choose ‘vertical’ for the alternative.

• Required: No
• Default: horizontal

Related components

• Toolbar may contain ToolbarGroup, ToolbarButton and ToolbarItem as children.