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

IconButton component

Toolbar component composed of attached IconButtons

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.