Toolbar Edit
Toolbar can be used to group related options. To emphasize groups of related icon buttons, a toolbar should share a common container.
Table of contents
Design guidelines
Usage
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.
States
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.
Disabled toolbars
Toolbars that cannot be selected can either be given a disabled state, or be hidden.
Development guidelines
Usage
1 2 3 4 5 6 7 8 9 10 11 12 | import { Toolbar, ToolbarButton } from '@wordpress/components' ; import { formatBold, formatItalic, link } from '@wordpress/icons' ; function MyToolbar() { return ( <Toolbar label= "Options" > <ToolbarButton icon={ formatBold } label= "Bold" /> <ToolbarButton icon={ formatItalic } label= "Italic" /> <ToolbarButton icon={ link } label= "Link" /> </Toolbar> ); } |
Props
Toolbar will pass all HTML props to the underlying element. Additionally, you can pass the custom props specified below.
label
An accessible label for the toolbar.
- Type:
String
- Required: Yes
Related components
- Toolbar may contain ToolbarGroup, ToolbarButton and ToolbarItem as children.