Versions Compared

Key

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

...

General guidelines

Structure

  • The toolbar is shown as a horizontal, single row.

  • It may contain one or more items.

Placement and Positioning

  • The toolbar is located on top of a data container area (e.g. Data Tablethe data table).

  • It should use the maximum width of the containerdata area.

  • Where possible relevant, the toolbar should be divided into 2 distinct types of operationstwo areas:

    • Action options, left-aligned - options controls - any action that impact the data (e.g. delete), left-aligned.

    • View options, right-aligned controls - options impacting the view of the data (e.g. print, search, change view mode etc.).

    • In case all options items are view optionscontrols, they will be left-aligned.

...

  • A toolbar may include:

    • a variety of components, such as Action Menus, Buttons, and Search.

    • information such as counters and statuses. (See data table image above).

  • Dialog Buttons cannot be used within a toolbar.

  • Optionally, a Icon Button can be used to group multiple actions into an Action Menu (see chart image above).

  • If actions can be grouped, they should be separated by a vertical divider (for example, table-level actions | row-level actions).

Internal Logic

...

  • Controls in the toolbar can be applied to either the entire data set or to one or more items within the content (depending on what has been selected).

  • Controls in the toolbar can be enabled/disabled in response to data selection (e.g. Delete can be disabled if no data is selected).

...