Visuals

UI Kit

Examples

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.

Other considerations:

• 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 and when not to use

See also

• Icon component.
• Icons guidelines.
• Button.
• Link vs button.
• Tooltip.
• Typography.

External links

Here are some examples of existing design systems or references:

• WCAG 2.1 Target Size.