| Table of Contents |
|---|
Description
A toolbar is a grouped set of controls used to apply action actions to a related content.
 |
Usage & Behavior
The toolbar may be used in 3 components.
Type | Image |
|---|---|
Data Table |   |
Widget-contentList |   |
ListChart |  |
General guidelines
Structure
A dedicated The toolbar is shown as a horizontal single row that applies to related content.
Placement and Positioning
The toolbar is located on top of a data container (e.g. Data table), with the same maximum width as of the container.
Where possible the toolbar can be divided into 2 distinct types of operations:
Left-aligned, actions that impact the data (e.g. delete).
Right-aligned, actions impacting 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
...
.
Content
A toolbar can include a variety of components such as Action Menus, Buttons, Pagination, Search etc…
- ,
are not used within a toolbar.
OptionalOptionally, a mini-hamburger menu button” (icon-mini-hamburger-menubutton (Itay lapid (Unlicensed) add icon) can be used to aggregate multiple actions in an Action Menus .
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. Tabletable-level actions Vs Rowrow-level - actions).
Internal Logic
A toolbar can be applied to single or multiple selection actions on the related content.
Controls in the toolbar can be enabeldenabled\disabled contextually to a selection (e.g. disabled delete action if no row is selected).
States
According to the component used in the toolbarThe toolbar itself has no states. Each component on the toolbar behave according to its states.
Validations and errors
According to the component used in the toolbarThe toolbar itself has no validations or errors. Each component 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.
Don’t use:
If a ribbon pattern is used.
General:
When
...
possible, consider using only icons, with a corresponding tooltip.
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
...
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