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.

Primary  Secondary


Few exceptions exist where the size of a button changes.

Large buttonSmall button

Was this page helpful?

Your submissions are monitored by our web team and are used to help improve the experience on