To keep in mind

A default icon button indicates to a user that they can perform an inline action on this page, such as:

• Apply an action to an object, e.g. save, delete, add an item, undo, create a new item.

• Trigger a new element to appear on the page e.g. toggle additional information, open a modal.

• Icon buttons use a button element (not a link element and no role="button"):

  • All buttons have an aria-label to describe the action to people using assistive technologies, such as screen readers:
    • No more than 2 to 3 words long.
    • Use verbs first; use only verbs where possible e.g. “Save”.
    • Avoid unnecessary words and articles, such as “the” or “a”.
    • Use sentence case.

• New icons used as icon buttons need to be user tested to test comprehension—can the user identify the action indicated by the icon?

• If there's any doubt about comprehension, a tooltip must be used on hover/focus of the icon button.

• Icons used in icon buttons are, by default, 20px in size (minimum) and can be scaled to larger sizes if it contextually makes sense.

• Icon buttons have a minimum touch zone of 48px.

• RTL: flip the direction of arrow icons when the user is using a right-to-left language.

Breadcrumb icon button

A breadcrumb icon button uses a link element instead of a button and navigates to another page.

Interaction guidelines

In CSS, “Default/Inactive” maps to initial style, “Hover/Focus” to :hover and :focus, and “Active/Pressed” to :active.

When to use

• Default icon button:
  • Use an icon button when a user can perform an inline action on this page and there's no room for a default button. Icon buttons are often used when there are 2 or 3 adjacent icons buttons that perform actions on a single item presented in a row.

When not to use

• When there's enough space, use a button instead.

See also

• Icons.
• Button.
• Link vs button.
• Tooltips.
• Typography.

External links

Here are some examples of existing design systems or references:

• WCAG 2.1 Target Size.