ToolbarItem Edit

A ToolbarItem is a generic headless component that can be used to make any custom component a Toolbar item. It should be 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.

Usage Usage

as prop as prop

You can use the as prop with a custom component or any HTML element.

import { Toolbar, ToolbarItem, Button } from '@wordpress/components';

function MyToolbar() {
    return (
        <Toolbar label="Options">
            <ToolbarItem as={ Button }>I am a toolbar button</ToolbarItem>
            <ToolbarItem as="button">I am another toolbar button</ToolbarItem>
        </Toolbar>
    );
}

Top ↑

render prop render prop

You can pass children as function to get the ToolbarItem props and pass them to another component.

import { Toolbar, ToolbarItem, DropdownMenu } from '@wordpress/components';
import { table } from '@wordpress/icons';

function MyToolbar() {
    return (
        <Toolbar label="Options">
            <ToolbarItem>
                { ( toolbarItemHTMLProps ) => (
                    <DropdownMenu
                        icon={ table }
                        toggleProps={ toolbarItemHTMLProps }
                        label={ 'Edit table' }
                        controls={ [] }
                    />
                ) }
            </ToolbarItem>
        </Toolbar>
    );
}

Top ↑

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, ToolbarItem, Button } from '@wordpress/components';

function Edit() {
    return (
        <BlockControls>
            <ToolbarGroup>
                <ToolbarItem as={ Button }>I am a toolbar button</ToolbarItem>
            </ToolbarGroup>
        </BlockControls>
    );
}

Top ↑