Component documentation


The toolbar is meant as a generic construct to position UI elements. It provides a structure where you can position items on the left, in the center and on the right.

The toolbar requires a parent .c-toolbar div that contains children that define the positioning: .c-toolbar__left, .c-toolbar__right and .c-toolbar__center.

The toolbar construct is used in many parts of the user interface: dialogs, panels, navbars and popovers all use the toolbar component to position elements in a consistent way.

Toolbar basics


Place items on the left, right or in the middle.

I am an item on the left

I am an item in the middle

I am an item on the right

Toolbar item spacing


There is consistent spacing between items in a toolbar. This example shows 2 items on the left, 2 items on the right.

Item left 1

Item left 2

Item right 1

Item right 2

Toolbar (dialog)


A toolbar as it might appear inside a dialog window.

Dialog title