On most clickable objects follow the same rules using the same states colours, behaviour and text decoration (underline).

  Default Hover Focus/active Disabled
Colour Blue swatch #0070C4 Dark blue swatch #004F84   opacity 40%
Outline     Yellow swatch #FEBA035, 2px  
Example Default primary button Primary button in hover status Primary button that's active Primary button that's disabled.



Button anatomy

Anatomy: icon + label + indicator
Icon: a visual associated with the button label and it is optional
Indicator: a symbol that represents the behaviour of the button, such as navigation, download, expand, collapse, and more


Buttons submit data from a user input. You commonly find buttons at the bottom of forms or simple field box groups, such as a search function. You may also use a button as a call-to-action or as navigation links.

Primary versus secondary. When buttons appear side-by-side, a decision must be made about which is the primary and secondary action.



Few exceptions exist where the size of a button changes.

Was this page helpful?

All fields are required unless otherwise indicated.

You will not receive a reply. Do not enter any personal information such as telephone numbers, addresses, or emails.

Your submissions are monitored by our web team and are used to help improve the experience on If you require a response, please go to our Contact page.