Description
A toolbar is a grouped set of controls used to apply actions to a related content.
 |
Usage & Behavior
The toolbar may be used in 3 components.
Type | Image |
|---|---|
Data Table |  |
List |  |
Chart |  |
General guidelines
Structure
The toolbar is shown as a horizontal single row.
Placement and Positioning
The toolbar is located on top of a data container (e.g. Data table), with the maximum width of the container.
Where possible the toolbar can be divided into 2 distinct types of operations:
Left-aligned, actions that impact the data (e.g. delete).
Right-aligned, actions impacting the view of the data (e.g. print, search, change view mode etc.)
In case all the components are only for viewing the data, they will be left-aligned.
Content
A toolbar can include a variety of components such as Action Menus, Buttons, Search etc…
Dialog buttons are not used within a toolbar.
Optionally, a mini-hamburger menu button (Itay lapid (Unlicensed) add icon) can be used to aggregate multiple actions in an Action Menus .
A toolbar can also include information such as counters and statuses (see example in data table image above).
If actions can be grouped, they should be separated by a vertical divider (e.g. table-level actions Vs row-level actions).
Internal Logic
A toolbar can be applied to single or multiple selection actions on the related content.
Controls in the toolbar can be enabled\disabled contextually to a selection (e.g. disabled delete action if no row is selected).
States
The toolbar itself has no states. Each component on the toolbar behave according to its states.
Validations and errors
The toolbar itself has no validations or errors. Each component on the toolbar may have its own validations.
Best practices
Use:
If the data set management relies on several controls and the actions are valid for the related content.
Don’t use:
If a ribbon pattern is used.
General:
When possible, consider using only icons, with a corresponding tooltip.
Icon buttons with text should be used to emphasize one or two specific actions.
Accessibility Compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
