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. Optionally 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> ); }
Props Props
This component accepts the same API of the Button component.
Related components Related components
- 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.