Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Toolbar

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

<div class="c-toolbar">
    <div class="c-toolbar__left">
        <div class="c-toolbar__item">
            <p>I am an item on the left</p>
        </div>
    </div>
    <div class="c-toolbar__center">
        <div class="c-toolbar__center-inner">
            <div class="c-toolbar__item">
                <p>I am an item in the middle</p>
            </div>
        </div>
    </div>
    <div class="c-toolbar__right">
        <div class="c-toolbar__item">
            <p>I am an item on the right</p>
        </div>
    </div>
</div>
.c-toolbar
    .c-toolbar__left
        .c-toolbar__item
            p I am an item on the left
    .c-toolbar__center
        .c-toolbar__center-inner
            .c-toolbar__item
                p I am an item in the middle
    .c-toolbar__right
        .c-toolbar__item
            p 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

<div class="c-toolbar">
    <div class="c-toolbar__left">
        <div class="c-toolbar__item">
            <p>Item left 1</p>
        </div>
        <div class="c-toolbar__item">
            <p>Item left 2</p>
        </div>
    </div>
    <div class="c-toolbar__right">
        <div class="c-toolbar__item">
            <p>Item right 1</p>
        </div>
        <div class="c-toolbar__item">
            <p>Item right 2</p>
        </div>
    </div>
</div>
.c-toolbar
    .c-toolbar__left
        .c-toolbar__item
            p Item left 1
        .c-toolbar__item
            p Item left 2
    .c-toolbar__right
        .c-toolbar__item
            p Item right 1
        .c-toolbar__item
            p Item right 2

Toolbar (dialog)

#

A toolbar as it might appear inside a dialog window.

Dialog title

<!-- Toolbar code-->
<div class="c-toolbar">
    <div class="c-toolbar__left">
        <div class="c-toolbar__item">
            <h2 class="c-toolbar__title">Dialog title</h2>
        </div>
    </div>
    <div class="c-toolbar__right">
        <div class="c-toolbar__item">
            <div class="c-button-toolbar">
                <button class="c-button c-button--borderless" data-dialog-close="data-dialog-close">
                    <div class="c-button__content">
                        <div class="o-svg-icon o-svg-icon-close  ">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.29289 5.2929C5.68342 4.90237 6.31658 4.90237 6.70711 5.2929L12 10.5858L17.2929 5.2929C17.6834 4.90237 18.3166 4.90237 18.7071 5.2929C19.0976 5.68342 19.0976 6.31659 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31659 4.90237 5.68342 5.29289 5.2929Z" fill="#595959" />
                            </svg>
                        </div>
                        <div class="u-sr-accessible">Cancel</div>
                    </div>
                </button>
            </div>
        </div>
    </div>
</div>
// Toolbar code
.c-toolbar
    .c-toolbar__left
        .c-toolbar__item
            h2.c-toolbar__title Dialog title
    .c-toolbar__right
        .c-toolbar__item
            .c-button-toolbar
                button.c-button.c-button--borderless(data-dialog-close)
                    .c-button__content
                        +icon('close')
                        .u-sr-accessible Cancel