Related Pages: << Links to related pages, if relevant >>

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

...

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

<<Remove non-related states or use NA to emphasize the component don’t have that state. See Text fields states >>

Interaction

<<for example, how to change value – type, arrows, use slider. See example: Numeric stepper interaction>>

Validations and errors

<<Show images for Errors and warnings. See example: Radio button validations and errors>>

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>

• <…>

• <…>

Accessibility Compliance

...

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

...