Component documentation

Basics

Components

Objects

Utilities

Button toolbar

Use a button toolbar to space buttons. When you need more space, use the toolbar instead.

<div class="c-button-toolbar">
    <button class="c-button c-button--icon c-button--secondary">
        <div class="o-svg-icon o-svg-icon-remove  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Remove</div>
    </button>
    <button class="c-button c-button--icon c-button--secondary">
        <div class="o-svg-icon o-svg-icon-add  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Add</div>
    </button>
</div>

.c-button-toolbar
    button.c-button.c-button--icon.c-button--secondary
        +icon('remove')
        .u-sr-accessible
            | Remove
    button.c-button.c-button--icon.c-button--secondary
        +icon('add')
        .u-sr-accessible
            | Add

Button toolbar (compact)

Add a .c-button-toolbar--compact class to move the buttons into each other.

<div class="c-button-toolbar c-button-toolbar--compact">
    <button class="c-button c-button--icon c-button--secondary">
        <div class="o-svg-icon o-svg-icon-remove  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Remove</div>
    </button>
    <button class="c-button c-button--icon c-button--secondary">
        <div class="o-svg-icon o-svg-icon-add  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Add</div>
    </button>
</div>

.c-button-toolbar.c-button-toolbar--compact
    button.c-button.c-button--icon.c-button--secondary
        +icon('remove')
        .u-sr-accessible
            | Remove
    button.c-button.c-button--icon.c-button--secondary
        +icon('add')
        .u-sr-accessible
            | Add

Button toolbar (compact)

Example with 3 buttons.

<div class="c-button-toolbar c-button-toolbar--compact">
    <button class="c-button c-button--icon c-button--secondary">
        <div class="o-svg-icon o-svg-icon-add  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Add</div>
    </button>
    <button class="c-button c-button--icon c-button--secondary">
        <div class="o-svg-icon o-svg-icon-edit  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Edit</div>
    </button>
    <button class="c-button c-button--icon c-button--secondary">
        <div class="o-svg-icon o-svg-icon-remove  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Remove</div>
    </button>
</div>

.c-button-toolbar.c-button-toolbar--compact
    button.c-button.c-button--icon.c-button--secondary
        +icon('add')
        .u-sr-accessible
            | Add
    button.c-button.c-button--icon.c-button--secondary
        +icon('edit')
        .u-sr-accessible
            | Edit
    button.c-button.c-button--icon.c-button--secondary
        +icon('remove')
        .u-sr-accessible
            | Remove

Button toolbar (compact)

Add a .c-button-toolbar--compact class to move the buttons into each other.

<div class="c-button-toolbar c-button-toolbar--compact">
    <button class="c-button c-button--icon c-button--primary">
        <div class="o-svg-icon o-svg-icon-remove  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Remove</div>
    </button>
    <button class="c-button c-button--icon c-button--secondary">
        <div class="o-svg-icon o-svg-icon-add  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Add</div>
    </button>
</div>

.c-button-toolbar.c-button-toolbar--compact
    button.c-button.c-button--icon.c-button--primary
        +icon('remove')
        .u-sr-accessible
            | Remove
    button.c-button.c-button--icon.c-button--secondary
        +icon('add')
        .u-sr-accessible
            | Add

Button toolbar vertical

<div class="c-button-toolbar c-button-toolbar--compact c-button-toolbar--vertical">
    <button class="c-button c-button--icon c-button--secondary">
        <div class="o-svg-icon o-svg-icon-add  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 4C12.5523 4 13 4.44771 13 5V11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H13V19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19V13H5C4.44772 13 4 12.5523 4 12C4 11.4477 4.44772 11 5 11H11V5C11 4.44771 11.4477 4 12 4Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Add</div>
    </button>
    <button class="c-button c-button--icon c-button--secondary">
        <div class="o-svg-icon o-svg-icon-edit  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16.2929 2.29289C16.6834 1.90237 17.3166 1.90237 17.7071 2.29289L21.7071 6.29289C22.0976 6.68342 22.0976 7.31658 21.7071 7.70711L8.70711 20.7071C8.51957 20.8946 8.26522 21 8 21H4C3.44772 21 3 20.5523 3 20V16C3 15.7348 3.10536 15.4804 3.29289 15.2929L13.2927 5.2931L16.2929 2.29289ZM14 7.41421L5 16.4142V19H7.58579L16.5858 10L14 7.41421ZM18 8.58579L19.5858 7L17 4.41421L15.4142 6L18 8.58579Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Edit</div>
    </button>
    <button class="c-button c-button--icon c-button--secondary">
        <div class="o-svg-icon o-svg-icon-remove  ">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" fill="#595959" />
            </svg>
        </div>
        <div class="u-sr-accessible">Remove</div>
    </button>
</div>

.c-button-toolbar.c-button-toolbar--compact.c-button-toolbar--vertical
    button.c-button.c-button--icon.c-button--secondary
        +icon('add')
        .u-sr-accessible
            | Add
    button.c-button.c-button--icon.c-button--secondary
        +icon('edit')
        .u-sr-accessible
            | Edit
    button.c-button.c-button--icon.c-button--secondary
        +icon('remove')
        .u-sr-accessible
            | Remove