Skip to main content
Search

Buttons

Buttons convey an action that the user can take.

There are four different styles of button:

  • Primary
  • Secondary
  • Highlight
  • Outline (white & strong)


Tertiary - link style

Within our public websites we refer to our link style as tertiary buttons, links come in two styles:

  • Tertiary strong
  • Tertiary white

Related

Usage guidelines

Do's

  • Use buttons to communicate the most important actions on your page
  • Buttons should have copy that clearly states to the user what the action is
  • Primary and highlight button styles must only be used once per page
  • Secondary, outline and tertiary buttons can be used more frequently.
  • Use buttons to make your actions stand out on the page. Remember users scan more than they read so a clear button will be noticed.

Don'ts

  • Try to avoid using more than two buttons on a page. Multiple buttons can cause decision fatigue leading to a poor user experience.
  • Pay careful attention to the colour of your background and the style of button you use. All colour contrast guidelines must be complied with as per our accessibility standards.
  • Avoid using disabled button states. If an action can’t be completed at this time consider hiding the button instead.