Button Component

Default Style

Button - Default

The default size is Medium and the default colour is Primary.

                        <button type="button" class="button">Default Button Style</button>

Modifiers

Button - Colours

                        <button type="button" class="button button--primary">Primary Button</button>

                        <button type="button" class="button button--secondary">Secondary Button</button>

                        <button type="button" class="button button--tertiary">Tertiary Button</button>

Button - Outline

                        <button type="button" class="button button--outline-light">Outline Light Button</button>

                        <button type="button" class="button button--outline-dark">Outline Dark Button</button>

Button - Sizes

                        <button type="button" class="button button--lg">Large Button</button>

                        <button type="button" class="button button--md">Medium Button</button>

                        <button type="button" class="button button--sm">Small Button</button>

                        <button type="button" class="button button--xs">Extra small Button</button>

Button - Icon

                        <button type="button" class="button button--ico">
                            <div><span>Button Icon</span><i class="ico ico--f-download"></i></div>
                        </button>

Button - Badge

                        <button type="button" class="button button--badge">
                            <div><span>Light Badge</span><div class="badge badge--white">100</div></div>
                        </button>

                        <button type="button" class="button button--tertiary button--badge">
                            <div><span>Dark Badge</span><div class="badge badge--primary">100</div></div>
                        </button>

Button - Block

                        <button type="button" class="button button--block">Button Block</button>

                        <button type="button" class="button button--block-sm">Button Block Mobile</button>

Button - Disabled

                        <button type="button" class="button is-disabled" disabled>Button Disabled</button>

Button Documentation

Use

Keep button text short 1 - 3 words

Variations

Multiple variations list above. MQU design team have a list of icons that can be used within the button icon variation