...
The toolbar is located on top of a data container (e.g. Data Table).
It should use the maximum width of the container.
Where possible the toolbar should be divided into 2 distinct types of operations:
Action options, left-aligned - options that impact the data (e.g. delete).
View options, right-aligned - options impacting the view of the data (e.g. print, search, change view mode etc.)
Where . In case all options are view options, they will be left-aligned.
Content
A toolbar can may include:
a variety of components, such as Action Menus, Buttons, and Search.
information such as counters and statuses. (See example in the Data Table 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.
(see chart image above).
If actions can be grouped, they should be separated by a vertical divider (for example, table-level actions | row-level actions).
Internal Logic
Options A toolbar can be contain one or more controls.
Controls in the toolbar can be applied to either the entire data or to one or more items within the content , (depending on what has been selected).
Controls in the toolbar can be enabled/disabled in response to data selection (e.g. Delete can be disabled if no data is selected).A toolbar can be created for one or more options; there is no lower limit.
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:
In case of a single selection data table, if all actions can be performed on a row-level.
If a ribbon pattern is used.
...