Upper Toolbar

Upper toolbar is a guidance pattern to allow designers create their own toolbars for edition with preview pages.

upper toolbar with different possible components described in usage section

This pattern lays out the different components we expect you to use in this kind of toolbar, where should they be placed and the order they should respect.

The Upper Toolbar is just another toolbar component. This toolbar can be implemented with or without borders, and background color can be modified if needed.

Usage

This toolbar has two areas: left and right. These areas are inherited from toolbar pattern. The following list states the components expected to display in each area. Use just the components that you need. This is just a list of the most frequent used components, others are accepted.

Left area
- Title
- Inline edit title
- Icon
- Localization button
Right area
- Status label
- Save date
- Toggle
- Buttons
  - Secondary borderless
  - Secondary
  - Primary (one maximum)
  - Secondary borderless (one maximum)

Attributes

upper toolbar with measures and distances between components

Examples of use

Document Preview

Document Preview toolbar with title, buttons to move between documents, share, download and actions button

Segment Creation

Segment creation toolbar with title, number of users, preview, cancel and save buttons