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

1. Design guidelines
2. Development guidelines
3. Related components

Design guidelines #Design guidelines

Top ↑

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.

Top ↑

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.

Top ↑

Development guidelines #Development guidelines

Top ↑

Usage #Usage

import { IconButton } from '@wordpress/components';

const MyIconButton = () => (
    <IconButton
        icon="ellipsis"
        label="More"
    />
);

Top ↑

Related components #Related components

• The Toolbar component is composed of IconButton components.