- style
Icon Buttons
- Rakefet Zur (Unlicensed)
- Carlie Bradshaw
- Itay lapid (Unlicensed)
- 1 Description
- 2 Types
- 3 Usage & Behaviour
- 3.1 General guidelines
- 3.1.1 Structure
- 3.1.2 Content
- 3.1.3 Internal logic
- 3.2 States
- 3.3 Interaction
- 3.4 Best practices
- 3.1 General guidelines
- 4 Accessibility Compliance
- 4.1 Focus management
- 5 Responsive design
- 6 Design
- 7 Code
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, or the label (where used), triggers the action.
On menu icon buttons:
clicking the button, or the label (where used), opens/closes the Action Menu.
On toggle icon buttons:
clicking the button, or the label (where used), 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 Action Menus | Focus management. |
Enter | Applies the action. | Opens the menu. For the Action menu’s focus management see Action Menus | Focus management. |
Esc | N/A | N/A |
Arrows | N/A | Up/Down - Opens the menu. |
Responsive design
Verint products should support all devices down to the common tablet size (960px width). For general guidelines, see Fundamentals - Responsive design.
The size of icon buttons should always remain the same.
Where space is limited, multiple options may be condensed into a button menu.
Design
Zeplin link |
|
|---|---|
Code