Icon Button
Icon buttons are buttons without visible text labels by default.
- Overview
- Autocomplete (not built)
- Avatar
- Badge
- Button
- Button Group (not built)
- Card
- Checkbox Group
- Collapsible
- Commentary
- Content
- Date Picker (not built)
- Divider
- Drawer
- Dropdown
- Empty State
- Filter Menu
- Global Notification
- Guidance Block
- Hero Card
- Icon
- Icon Button
- Illustration
- Infinite Scroll (not built)
- Inline Notification
- Likert Scale Legacy
- Loading Placeholder
- Loading Skeleton (not built)
- Loading Spinner
- Menu
- Modal
- Pagination (not built)
- Popover
- Progress Bar (not built)
- Progress Stepper
- Radio
- Radio Group
- Rich Text Editor
- Search Field
- Select
- Slider
- Slider
- Split Button
- Table
- Tabs
- Tag
- Tile
- Tile Grid
- Toast Notification
- Tooltip
- Well
Need to know
- 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.
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 or reveal an overflow menu.
Other considerations:
- Icon buttons use a button element (not a link element and no
role="button"). - 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:
Icon buttons with Tooltips
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 tabindex attribute.
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.
Breadcrumb icon button
A breadcrumb icon button is an exceptional case that uses a link element instead of a button because it navigates to another page.
Interaction guidelines
Disabled Icon Buttons use 30% opacity on the component itself (not, for example, the inner icon) as described in the Interaction states guidelines.
When to use and when not to use
- 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.
See also
External links
Here are some examples of existing design systems or references: