...
A toolbar is a grouped set of controls used , allowing users to apply perform actions to on related content.
 |
Usage & Behavior
...
The toolbar is shown as a horizontal, single row.
It may contain one or more itemscontrols.
Placement and Positioning
The toolbar is located on top of a data area (e.g. the data table).
It should use uses the maximum width of the data area.
Where relevant, the toolbar should be divided into two areas:
Action controls - any action area - aligned to the left, including controls that impact the data (e.g. delete), left-aligned.
View controls - options impacting area - aligned to the right, including controls that impact the view of the data (e.g. print, search, change view mode etc.)In case all items are view controls, they will be left-aligned.
If there is only a view area, it will be aligned to the left.
Content
A toolbar 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 image example above).
Dialog Buttons cannot be used within a toolbar.
If there are sets of controls (for example, table-level actions vs. Optionally, a Icon Button can be used to group multiple actions into row-level actions), they should be separated by a vertical divider.
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 image example above). If actions can be grouped, they should be separated by a vertical divider (for example, table-level actions | row-level actions)In this case, the icon button will be the last control.
Internal Logic
Controls in the toolbar Toolbar controls can be applied to either selected items or the entire data set or to one or more items within the content (depending on what has been selected).Controls in the toolbar related content.
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 control on the toolbar will behave according to its own states.
...
if 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 On a single-selection data table, if all actions can be performed on 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.
...