...
A toolbar is a grouped set of controls used , allowing users to apply perform actions to on related content.
...
Usage & Behavior
The toolbar may be used in conjunction 3 componentsapply to the whole page, or be associated with a data table, list, or chart.
General guidelines
Structure
The toolbar is shown as a horizontal, single row.
It may contain one or more controls.
Placement and Positioning
The toolbar is located on top of a data container area (e.g. Data Tablethe data table).
It should use uses the maximum width of the containerdata area.
Where possible relevant, the toolbar should be divided into 2 distinct types of operationstwo areas:
Action options, leftarea - aligned - options to the left, including controls that impact the data (e.g. delete).
View options, right-aligned - options impacting area - aligned to the right, including controls that impact the view of the data (e.g. print, search, change view mode etc.)
Where all options are view options, they will be left-aligned.
If there is only a view area, it will be aligned to the left, depending on the context of the user flow.
Content
A toolbar can may include:
a variety of componentscontrols, such as Action Menus, Buttons, and a Search component.
information items, such as counters and statuses . (See data table example in the Data Table image above).
Dialog Buttons cannot be used within a toolbar.
Optionally, a hamburger Icon Button can be used to group multiple actions into an Action Menu.
If actions can be groupedIf there are sets of controls (for example, table-level actions vs. row-level actions), they should be separated by a vertical divider (for example, table-level actions | row-level actions).
In case of a large number of items, a three-dotted Icon Button may be used, allowing users to open an Action Menu (see the chart example above). In this case, the icon button will be the last control.
Internal Logic
A toolbar Toolbar controls can be applied to single or multiple selection actions on the selected items or the entire related content. Controls in the toolbar
Toolbar controls can be enabled/disabled in response to data selection (e.g., a Delete can control will be disabled if no data is was selected).
States
The toolbar itself has no states. Each component control on the toolbar will behave according to its own states.
...
The toolbar itself has no validations or errors. Each component control 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 contentif the user can perform actions or change the view of the related content.
if the related content allows multi selection.
Don’t use:
On a single-selection data table, if all actions can be performed only at a row-level.
If a ribbon pattern is used.
...
Where possible, consider using only Icon Buttons, with a corresponding Tooltip Tooltips.
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
...