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. Optionally 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 ↑

Related components #Related components

• ToolbarItem should be used inside Toolbar or ToolbarGroup.
• If you want a simple toolbar button, consider using ToolbarButton instead.