Description

A toolbar is a grouped set of controls used to apply action to related content.

Usage & Behavior

The toolbar may be used in 3 components.

Type	Image
Data Table
Widget-content
List

General guidelines

Structure

A dedicated 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 width as 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)

    • 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 as Action Menus, Buttons, Pagination, Search etc…

  • 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 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. Table-actions Vs Row-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 enabeld\disabled contextually to a selection (e.g. disabled delete action if no row is selected).

States

According to the component used in the toolbar.

Validations and errors

According to the component used in the toolbar.

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 low on space, consider removing text from icon buttons and use a tooltip instead.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility

Design

Zeplin link	Screen thumbnail
https://zpl.io/aB4Eedp

Code

<<a box containing the code - when there is no code to present use the Coming Soon GIF>>

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

  • https://experience.sap.com/fiori-design-web/table-bar/

  • https://experience.sap.com/fiori-design-web/header-toolbar/

  • https://experience.sap.com/fiori-design-web/chart-toolbar/

  • https://experience.sap.com/fiori-design-web/footer-toolbar/

• toolbar cannot come together with Ribbon.

Examples

https://zpl.io/2p6N8QQ	https://zpl.io/br8Njl5
https://zpl.io/begRk0p	https://zpl.io/aNzWlZa
https://app.zeplin.io/project/5979abf9bd8c83d7af16e80a/screen/5c5161dd9696de3093d54226/	https://zpl.io/2p9DX8N
https://zpl.io/V4myolN