Clickable objects

Guidance on clickable, interactive objects, plus aesthetics and behaviours.

Explore pages in:


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