DCJ Digital Design System

Button

Buttons are used to trigger actions. They allow users to perform an action and should describe what happens when pressed. Examples of button contexts include:

  • submitting a form
  • making a payment
  • saving information 

Refer to NSW Digital Design System - Buttons for full guidance and demo on how and when to use this.

Preview

A screenshot of the button component with red labels to describe its feature.
Labels: 01 primay button, 02 secondary button.

Customisation

Button colour

  • Brand dark - this is the default colour of the button.
  • White - this is the inverse colour of the button when it is placed inside a dark section.

Button types

  • The Primary button defaults to a solid brand dark colour and switches to white when used on a dark section.
  • The Secondary button defaults to a outlined brand dark colour and switches to white when used on a dark section.

Accessibility features

Ability to set aria label for each button on a page to allow proper announcement of the button.

DCJ authoring guidelines

Buttons should be used when the user performs an action. There is no limit to the number of buttons allowed on a page. 

Avoid when:

  • navigating users to different pages. Use text links instead.  
  • navigating to another part within the same page. Use an anchor link. 

Limits

  • A maximum of 2 buttons can be used together side by side. Where there are 2 buttons, the first must be set as a primary button and the second must be set as a secondary button.
  • Button text has a maximum character limit of 30. This is to keep the purpose of buttons as call to actions. 

Page type

Buttons can be used on: 

  • content pages
  • campaign pages
  • landing pages
  • homepage
  • Easy Read.
Last updated:

18 Jun 2024