Description

A toolbar is a grouped set of controls, allowing users to perform actions on related content.

Open

Usage & Behavior

The toolbar may apply to the whole page, or be associated with a data table, list, or chart.

Type	Image

Type	Image
Data Table	Open
List
Chart
Page

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 area (e.g. the data table).

• It uses the maximum width of the data area.

• Where relevant, the toolbar should be divided into two areas:

  • Action area - aligned to the left, including controls that impact the data (e.g. delete).

  • View area - aligned to the right, including controls that impact the view of the data (e.g. print, search, change view mode etc.).
    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 may include:

  • a variety of controls, such as Action Menus, Buttons, 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 there are sets of controls (for example, table-level actions vs. 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 example above). In this case, the icon button will be the last control.

Internal Logic

• Toolbar controls can be applied to selected items or the entire related content.

• Toolbar controls can be enabled/disabled in response to data selection (e.g., a Delete control will be disabled if no data was selected).

States

The toolbar itself has no states. Each control on the toolbar will behave according to its own states.

Validations and errors

The toolbar itself has no validations or errors. Each control on the toolbar may have its own validations.

Best practices

Use:

• 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:

• 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

Code