Description
Icon buttons are used where Dialog Buttons won’t comfortably fit, such as toolbars, menus, and tables.
 |
Types
Type | Usage |
Icon buttons (standard) | Performs a single action, as a normal button. |
Toggle icon buttons | Toggles between two opposite states. |
Icon menu buttons | Opens an Action Menus. |
Usage & Behaviour
General guidelines
Structure
When used with a label, the icon should be placed on the left side of the label. (For right-to-left languages, the icon should be on the right).
Content
As per the main Buttons information. See Icon Library.
Internal logic
When no label is shown, a Tooltip should be shown on hover.
States
State | Icon Button (similar to icon toggle button) | Icon Button + label | Icon Menu Button |
|---|---|---|---|
Regular |  |  |  |
Hover |  |  |  |
Active |  |  |  |
Disabled |  |  |  |
Focused |  |  |  |
Focused Hover |  |  |  |
Focused Active |  |  |  |
Focused Disabled |  |  |  |
Interaction
On standard icon buttons:
Clicking the button triggers the action.
On menu icon buttons:
Clicking the button opens/closes the Action Menu.
On toggle icon buttons:
clicking the button switches between its states. Example:
 | A locked icon, when clicked… |
 | … turns into an unlocked icon. |
Tooltips for toggle icon buttons should detail the next available action. Example:
 | The tooltip in the locked state would be Unlock. |
Best practices
Use:
when the icon’s meaning is unambiguous.
Don’t use:
icons only, when there is enough space to add labels.
General
Separate groups of icons with a vertical separator.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Icon button | Icon Menu button |
Tab | Navigates to the next component. | Navigates to the next component |
Shift + Tab | Navigates to the previous component. | Navigates to the previous component. |
Space | Applies the action. | Opens the menu. For the Action menu’s focus management see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/918917536/Action+Menus#Focus-management. |
Enter | Applies the action. | Opens the menu. For the Action menu’s focus management see https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/918917536/Action+Menus#Focus-management. |
Esc | N/A | N/A |
Arrows | N/A | Up/Down - Opens the menu. |
Design
Zeplin link | |
|---|---|
 | |
 | |
 |