Commentary

Standard button element with controls. Colours are set from element-colors.css file. 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
.has-hover changes button color on hover
.is-loading keeps button color, overwrites text and shows spinner
Button size options: .is-small, .is-normal, .is-medium, .is-large
.buttons forms a button group
Button group size options: .are-small, .are-normal, .are-medium, .are-large
Dependencies:
File: buttons.css
Variables: --bg-main,--bg-element, --border-main-darker, --grey-dark, --radius-elem, --size-4, --size-5, --size-6, --size-7, --text-comp, --white-ter

Examples

Main Colours

Basic Buttons

Buttons with Hover

Outlined + Hover

Combined HTML Code Example


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

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

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

Other Button Decorations

Inverted + Hover

Loading Buttons

Disabled + Rounded

Combined HTML Code Example


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

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

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

Button Sizes

Basic Button + Size + Icon

Link as Button

Basic Button + Full Width

Combined Code Example


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

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

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

                <a class="button is-danger has-hover" href="#core-element_buttons">Link as Button</a>

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

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

                <button type="button" class="is-tertiary-inverted width-full has-hover" aria-label="Tertiary">
                    <span>Tertiary</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" class="btn-default has-hover" aria-label="Default">Default</button>
            <button type="button" class="is-primary has-hover" aria-label="Primary">Primary</button>
            <button type="button" class="is-secondary has-hover" aria-label="Secondary">Secondary</button>
            <button type="button" class="is-warning has-hover" aria-label="Warning">Warning</button>
        </div>

        <div class="buttons [options: are-small are-medium are-large]">
            <button type="button" class="btn-default has-hover" aria-label="Default">Default</button>
            <button type="button" class="is-primary has-hover" aria-label="Primary">Primary</button>
            <button type="button" class="is-secondary has-hover" aria-label="Secondary">Secondary</button>
            <button type="button" class="is-warning has-hover" aria-label="Warning">Warning</button>
        </div>

        <div class="buttons">
            <button type="button" class="btn-default has-hover" aria-label="Default">Default</button>
            <button type="button" class="is-primary-outlined has-hover" aria-label="Primary Outlined">Primary Outlined</button>
            <button type="button" class="is-secondary-outlined has-hover" aria-label="Secondary Outlined">Secondary Outlined</button>
            <button type="button" class="is-tertiary-outlined has-hover" aria-label="Tertiary Outlined">Tertiary Outlined</button>
        </div>