Button

Create a 'button' with a <button> or <a> element to retain the native click function.

Buttons

The button component styles can be applied to a number of different HTML tags.

Anchor

Button Sizes

Button size can be changed to create more visual weight in favour of the button.

Button

Button Types

Different types of button allows us to change visual hierarchy within a layout.

Button

Visual Hierarchy

Stick to a visual hierarchy with button colours, first using the primary brand colour then secondary and tertiary.

Button

Buttons in Feedback Colours

A set of button colours based off of our user feedback colour set.

Button

Disabled Buttons

Disable any button type including <a> links.

Disabled

Loading Button

Add loading feedback to a button.

Buttons /w Icons

Improve understanding of a button or action with an icon. Looking for an icon?

Ensure to check accessibility markup guides for using icons inside a button.

Useful notes and reading:

Notes:

  • Button Situations

    Buttons <button> should be used in situations where users might need to:

    • submit a form
    • begin a new task
    • trigger a new UI element to appear on the page
    • specify a new or next step in a process

  • Create semantic structure

    Visual hierarchy can be really helpful for those whose can see it, but remember that not everyone is able to see it. Ensure buttons between primary, secondary and tertiary have distinguishing design, along with clear UX copy.

Useful Links: