Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

The toolbar may be used in conjunction with 3 components:

Type

Image

Data Table

Image RemovedImage Added

List

Chart

General guidelines

Structure

...

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

...

  • Where possible, consider using only Icon Buttons, with corresponding Tooltips.

  • Icon buttons with text should be used to emphasize one or two specific actions.

...

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

Design

Zeplin link

Screen thumbnail

https://zpl.io/aB4Eedp

...