Toolbar Edit

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

1. Design guidelines
2. Development guidelines
3. Related components

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.

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.

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

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>
    );
}

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

An accessible label for the toolbar.

• Type: String
• Required: Yes

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