IconButton
Edit
Icon buttons tell users what actions they can take and give them a way to interact with the interface. You’ll find them throughout a UI, particularly in places like:
- Button groups
- Toolbars
Table of contents Table of contents
Design guidelines Design guidelines
Best practices Best practices
Icon buttons should:
- Choose a clear and accurate icon to represent the action.
- Clearly communicate that clicking or tapping will trigger an action.
- Use established colors appropriately. For example, only use red buttons for actions that are difficult or impossible to undo.
- Have consistent locations in the interface.
Anatomy Anatomy
Icon buttons have low emphasis. They don’t stand out much on the page, so they’re used for less-important actions. What’s less important can vary based on context, but it’s usually a supplementary action to the main action we want someone to take. Icon buttons are also useful when you don’t want to distract from the content.
Development guidelines Development guidelines
Usage Usage
import { IconButton } from '@wordpress/components'; const MyIconButton = () => ( <IconButton icon="ellipsis" label="More" /> );
Related components Related components
- The
Toolbar
component is composed ofIconButton
components.