Button

With buttons, users make choices and take actions. Each button includes a call to action — a very short explanation of what clicking the button will achieve. Different types of buttons are used according to their functions within the following hierarchy.

Status
Released
Version

2.0.1

Last updated

28 Nov 2019

Diagram showing the proper spacing between buttons

Basic buttons

Learn more
Usage

Buttons typically appear throughout the user interface in places like:

  • Dialogs
  • Modal windows
  • Forms
  • Cards
  • Toolbars

Outline buttons

Usage

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but aren't the page's primary goal.

Toggle

On Off
Usage

A toggle button clearly shows active and inactive status.

Floating action button

Usage

Floating action buttons (FABs) appear in front of all other content on the screen. They enable the page's main (or most common) action.

Hierarchy

Only use one primary button per page; this is for the page's dominant call to action. Always move to secondary and then tertiary.

Clarity

Buttons should be clearly identifiable on the page. A button's function and state should be easy to understand.

Labelling

Buttons should be concise labels that tell readers what to expect when they click. Label text is written in title case (capitalise the first letter of each word). Do no wrap text.

Relevance

Buttons must make sense in context; they should be relevant to the screens they appear on.

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>