...

...

...

...

...

...

...

...

...

...

...

...

...

...

...

• Description

• Basic Flow

• Types 

• Usage & Behavior

  • General guidelines

    • Structure

    • Placement and Positioning

    • Default State

    • Content

    • Internal Logic

  • States

  • Interaction

  • Validations and errors

  • Transitions

  • Best practices

• Future Version (TBD)

• Accessibility Compliance

• Design

• Code

...

A toolbar is a grouped set of buttons and other types of components controls used to apply action to data.

<< Most communicative screenshot of the component >>

Types 

<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case, each type should be described in a sub-page. The main page should be used only for the common grounds of the component>>

...

Type

...

Usage

...

Image

...

Link to the relevant page

...

...

Link to the relevant page

...

Usage & BehaviorUsage & Behavior

The toolbar may be used in 3 components

Type	Image
Data Table	Image Added
Widget-content	Image Added
List	<add image>

General guidelines

Structure

A dedicated horizontal single row dedicated to buttons and actions that apply applies to a data set.

Placement and Positioning

• The toolbar is located on top of a data container (e,g, Data table, Widget, List Etc…) and takes the full width of the data set) with the same width as a data container

• In some cases, the row of a toolbar can accommodate additional non-related components (e.g. a widget with a title text)Right

• Where possible the toolbar can be divided into 2 distinct types of operations:

  • Left-aligned

  -

  • , actions that impact the data (e.g. delete)

  Left

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

Internal Logic

<<if there is a certain mechanism that cannot be separated from the component. See example: Data tables internal logic >>

States

According to Buttons states

Interaction

...

• • Dialog buttons, are not used within a toolbar

• It can also include information such as counters and statuses

• 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 a data set

• Controls in the toolbar can be contextual to the data set (e.g. disabled delete action if no row is selected)

States

According to the component used in the toolbar

Validations and errors

According to Buttons states

Transitions

<<Where possible describe shortly and demonstrate transitions or animations of the component pattern with animated GIF>>

Best practices

<Whenever a recommendation (not a must) is provided>>

Use:

• <…>

• <…>

Don’t use

• <…>

• <…>

General

• <…>

Future Version (TBD)

< Edge cases, uncertain aspects, incomplete description>

• <…>

• <…>

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 data set.

Don’t use

• If a ribbon component is in place, you may want to consider using this place over a toolbar

General

• When low on space, consider removing text from icon buttons and use the tooltip

Accessibility Compliance

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

...

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

...

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