Icon buttons are buttons without visible text labels by default.
- Autocomplete (not built)
- Button Group (not built)
- Checkbox Group
- Date Picker (not built)
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon Button
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Pagination (not built)
- Progress Bar (not built)
- Progress Stepper
- Radio Group
- Rich Text Editor
- Search Field
- Split Button
- Tile Grid
- Toast Notification
- Default icon buttons perform actions using action icons without labels.
- Use a Primary icon button when it's the most important action to take.
- Use a Destructive icon button when the action will result in data loss, cannot be undone, or otherwise have significant consequences.
- Breadcrumb icon buttons use link elements to navigate and must show a destination as text on hover/focus.
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 or reveal an overflow menu.
- Icon buttons use a button element (not a link element and no
- All icon buttons have an
aria-labelto 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?
- 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.
- Interaction states, such as disabled and working buttons:
If there's any doubt about comprehension for an Icon Button with no text label, a Tooltip must be used on hover and focus of the Icon Button. Buttons natively receive keyboard focus so there's no need to add a
In a Tooltip used to describe the Icon Button's action (the "tool's tip"), use 1 noun or noun phrase to label the action that will occur by activating the button.
A breadcrumb icon button is an exceptional case that uses a link element instead of a button because it navigates to another page.
Disabled Icon Buttons use 30% opacity on the component itself (not, for example, the inner icon) as described in the Interaction states guidelines.
- 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.
Here are some examples of existing design systems or references: