...
A toolbar is a grouped set of controls used to apply actions to a related content.
 |
Usage & Behavior
The toolbar may be used in conjunction 3 components.
Type | Image |
|---|---|
 | |
 | |
Chart |  |
General guidelines
Structure
...
The toolbar is located on top of a data container (e.g. Data table), with Table).
It should use the maximum width of the container.
Where possible the toolbar can should be divided into 2 distinct types of operations:
LeftAction options, left-aligned , actions - options that impact the data (e.g. delete).
RightView options, right-aligned , actions - options impacting the view of the data (e.g. print, search, change view mode etc.)
...
Where all
...
options are view options, they will be left-aligned.
Content
A toolbar can include:
a variety of components, such as Action Menus, Buttons,
and Search.
information such as counters and statuses. (See example in the Data Table image above).
Dialog Buttons cannot be used within a toolbar.
Optionally, a mini- hamburger menu button Icon Button can be used to aggregate group multiple actions in into an Action MenusMenu.
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. for example, table-level actions Vs | row-level actions).
Internal Logic
A toolbar can be applied to used for single or multiple selection actions on the related content.
Controls in the toolbar can be enabled\/disabled contextually in response to a data selection (e.g. Delete can be disabled delete action if no row data is selected).
States
The toolbar itself has no states. Each component on the toolbar will behave according to its own 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 management of the data set
...
relies on several controls, and the actions are
...
applicable to the related content.
Don’t use:
If a ribbon pattern is used.
General:
When Where possible, consider using only icons Icon Buttons, with a corresponding tooltip Tooltip.
Icon buttons with text should be used to emphasize one or two specific actions.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
 |
Code
...