Toolbar Edit

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

Toolbar component above an image block

Table of contents Table of contents

  1. Design guidelines
  2. Development guidelines

Top ↑

Design guidelines Design guidelines

Usage Usage

Selected action Selected action

Only one option in a toolbar can be selected and active at a time. Selecting one option deselects any other.

Top ↑

Best practices 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.

A toolbar attached to the top left side of a block. (1. Toolbar, 2. Block)

Top ↑

States States

Top ↑

Active and available toolbars 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.

Toolbar component

Top ↑

Disabled toolbars Disabled toolbars

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

Top ↑

Development guidelines Development guidelines

Top ↑

Usage Usage

import { Toolbar } from '@wordpress/components';
import { withState } from '@wordpress/compose';

const MyToolbar = withState( {
    activeControl: 'up',
} )( ( { activeControl, setState } ) => { 
    function createThumbsControl( thumbs ) {
        return {
            icon: `thumbs-${ thumbs }`,
            title: `Thumbs ${ thumbs }`,
            isActive: activeControl === thumbs,
            onClick: () => setState( { activeControl: thumbs } ),
        };
    }

    return (
        <Toolbar controls={ [ 'up', 'down' ].map( createThumbsControl ) } />
    );
} );