Commentary

Standard button element with controls. The button has four sizes that can be changed with a modifier. Buttons can be grouped into a button bar. Icons can be added to a button to show on the left.

Note that the default action of a button is "submit". A general button not associated with a form element should have the attribute type="button" which changes its default behaviour and can be handled by an event mechanism.

UI / UX designers have many opinions on how to use buttons. One useful article is button design. Note also that for accessibility reasons, buttons should also have an accessible name to aid screen readers.

Usage

Classes:
button takes over button HTML tag
.button class to decorate link that need to look like a button
Colour and decoration options: .button-primary, .button-secondary, .button-complement, .button-primary-outlined, .button-secondary-outlined, .button-complement-outlined, .button-primary-inverted, .button-secondary-inverted, .button-complement-inverted, .button-default-inverted, .button-default-outlined
.is-rectangle creates rounded corners instead of a modern pill shape
.has-no-hover does not change a button color on hover
.is-loading keeps button color, overwrites text and shows spinner
Button size options: .is-small, .is-medium, .is-large
.buttons (plural!) used with an enclosing div to form a button group
Button group size options: .are-small, .are-medium, .are-large
Dependencies:
File: buttons.css
Variables: --bg-main,--bg-element, --border-main-darker, --grey-dark, --complement, --complement-dark, --complement-text-invert, --primary, --primary-dark, --primary-text-invert, --secondary, --secondary-dark, --secondary-text-invert, --pad-horz, --pad-vert, --radius-elem, --size-4, --size-5, --size-6, --size-7, --text-comp, --text-elem, --text-invert, --weight-semibold
Layer: elements

Examples

Main Colours

Basic Buttons

Outlined

Inverted

Combined HTML Code Example


                <button type="button" class="button-primary"  aria-label="Primary">
                    Primary
                </button>

                <button type="button" class="button-primary-outlined" aria-label="Primary">
                    Primary
                </button>

                <button type="button" class="button-primary-inverted" aria-label="Primary">
                    Primary
                </button>

Other Button Decorations

Loading Buttons

Buttons + No Hover

Disabled + Rectangle + No Hover

Combined HTML Code Example


                <button type="button" class="button-primary is-loading" aria-label="Primary">
                    Primary
                </button>

                 <button type="button" class="button-primary has-no-hover" aria-label="Primary">
                    Primary
                </button>

                <button type="button" disabled class="button-primary is-rectangle" aria-label="Primary">
                    Primary
                </button>

Button Sizes

Basic Button + Size + Icon

Basic Button + Full Width

Combined Code Example


                <button type="button" class="button-primary is-small" aria-label="complement">
                    Primary Small
                </button>

                <button type="button" class="button-secondary is-medium" aria-label="complement">
                    Secondary Medium
                </button>

                <button type="button" class="button-complement is-large" aria-label="complement">
                    <span class="icon-bg-bell"></span>
                    <span>Complement Large</span>
                </button>

                <button type="button" class="button-primary width-full" aria-label="Primary">
                    Primary
                </button>

                <button type="button" class="button-secondary-outlined width-full" aria-label="Secondary">
                    <span class="icon-bg-clock"></span>
                    <span>Secondary</span>
                </button>

                <button type="button" class="button-complement-inverted width-full" aria-label="complement">
                    <span>Complement</span>
                    <span class="icon-bg-link"></span>
                </button>

Button Groups

Button Groups, Decoration and Sizes

Button Group Code Example


        <div class="buttons">
            <button type="button" aria-label="Default">Default</button>
            <button type="button" class="button-primary" aria-label="Primary">Primary</button>
            <button type="button" class="button-secondary" aria-label="Secondary">Secondary</button>
            <button type="button" class="button-complement" aria-label="Complement">Complement</button>
        </div>

        <div class="buttons [options: are-small are-medium are-large]">
            <button type="button" aria-label="Default">Default</button>
            <button type="button" class="button-primary" aria-label="Primary">Primary</button>
            <button type="button" class="button-secondary" aria-label="Secondary">Secondary</button>
            <button type="button" class="button-complement" aria-label="Complement">Complement</button>
        </div>

        <div class="buttons">
            <button type="button" class="button-default-outlined" aria-label="Default">Default Outlined</button>
            <button type="button" class="button-primary-outlined" aria-label="Primary Outlined">Primary Outlined</button>
            <button type="button" class="button-secondary-outlined" aria-label="Secondary Outlined">Secondary Outlined</button>
            <button type="button" class="button-complement-outlined" aria-label="Complement Outlined">Complement Outlined</button>
        </div>