| Table of Contents |
|---|
Description
A toolbar is a grouped set of controls used to apply action to , allowing users to perform actions on related content.
...
Usage & Behavior
The toolbar may be used in 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 the data table) with the same width as the container.
It uses the maximum width of the data area.
Where possible relevant, the toolbar can should be divided into 2 distinct types of operationstwo areas:
LeftAction area - aligned to the left, actions including controls that impact the data (e.g. delete).
RightView area - aligned , actions impacting to the right, including controls that impact 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...
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
controls, such as Action Menus, Buttons,
Dialog buttons, are not used within a toolbar.
Optional, a mini-hamburger menu button” (icon-mini-hamburger-menu) can be used to aggregate multiple actions in an Action Menus .
- A toolbar can also include information
and a Search component.
information items, such as counters and statuses (
See data table
example above).
Dialog Buttons cannot be used within a toolbar.
If actions can be groupedthere are sets of controls (for example, table-level actions vs. row-level actions), they should be separated by a vertical divider (e.g. Table-actions Vs 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 enabeld\disabled contextually to a enabled/disabled in response to data selection (e.g. disabled delete action , a Delete control will be disabled if no row is data was selected).
States
According to the component used in the toolbarThe toolbar itself has no states. Each control on the toolbar will behave according to its own states.
Validations and errors
According to the component used in the toolbarThe toolbar itself has no validations or errors. Each control 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 entire related content
if 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.
General: When low on space, consider removing text from icon buttons and use a tooltip instead
Where possible, consider using only Icon Buttons, with corresponding Tooltips.
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
...
...
Delete at the end anything below this
How much to hide - Burger menu?
should tags be used?
Links -
...
https://www.carbondesignsystem.com/patterns/text-toolbar-pattern/.- text toolbar for rich editing of text
...
Sap
...
toolbar cannot come together with Ribbon.
Examples
...
...
...
...
...
https://app.zeplin.io/project/5979abf9bd8c83d7af16e80a/screen/5c5161dd9696de3093d54226/
...
...
...
DELETE WHEN FINISHED
what should be in the toolbar
Clear definition of a toolbar
Only for Table, Widget-content, List
Not addressing Page level actions, Cards, Pop overs
general guidelines page addressing different types for different components
Should the Table (Widget) section of the toolbar be removed