ToolbarButton Edit

ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar or ToolbarGroup when used to create general interfaces. If you’re using it to add controls to your custom block, you should consider using BlockControls.

It has similar features to the Button component. Using ToolbarButton will ensure the correct styling for a button in a toolbar, and also that keyboard interactions in a toolbar are consistent with the WAI-ARIA toolbar pattern.

Usage Usage

To create general interfaces, you’ll want to render ToolbarButton in a Toolbar component.

import { Toolbar, ToolbarButton } from '@wordpress/components';
import { edit } from '@wordpress/icons';

function MyToolbar() {
    return (
        <Toolbar label="Options">
            <ToolbarButton
                icon={ edit }
                label="Edit"
                onClick={ () => alert( 'Editing' ) }
            />
        </Toolbar>
    );
}

Inside BlockControls Inside BlockControls

If you’re working on a custom block and you want to add controls to the block toolbar, you should use BlockControls instead. Optinally wrapping it with ToolbarGroup.

import { BlockControls } from '@wordpress/block-editor';
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { edit } from '@wordpress/icons';

function Edit() {
    return (
        <BlockControls>
            <ToolbarGroup>
                <ToolbarButton
                    icon={ edit }
                    label="Edit"
                    onClick={ () => alert( 'Editing' ) }
                />
            </ToolbarGroup>
        </BlockControls>
    );
}

Top ↑

Props Props

This component accepts the same API of the Button component.

Top ↑

  • If you wish to implement a control to select options grouped as icon buttons you can use the Toolbar component, which already handles this strategy.
  • The ToolbarButton may be used with other elements such as Dropdown to display options in a popover.