A NSW Government website
Design System v3.0.5

Buttons

🔹 Needed for NSW Government Branding

Buttons provide users with the ability to submit an action.

Figma React

Usage

Buttons should be used when the user performs an action, and should describe what happens when pressed. Examples of button contexts include:

  • submitting a form
  • cancelling a transaction
  • saving information
  • making a payment

Buttons vs. links

Buttons should be used if there is an action performed. For navigating users to different pages or to another part within the same page, use a text link instead.

Button states

Buttons are styled according to their purpose:

  • Brand buttons are for the page's primary user action (call to action). Brand dark should be used as the primary Brand button and Brand light should be used when the background requires a light variant button.
  • Outlined buttons are used for secondary call to actions.
  • Danger buttons are NSW Brand Highlight and used to confirm a destructive action, such as delete.
  • Disabled buttons can be used if research shows that it helps users understand the screen. Disabled buttons can be harder to see, so avoid using them where possible.

Icons

Icons can be added to support the action. Avoid using an icon as standalone as they may be interpreted differently by different users. It is important to ensure where an icon is used it matches the intended action.

Tips

Brand Dark

Link Link icon

Brand Dark Outline

Link Link icon

Brand Dark Outline Solid

Link Link icon

Brand Light

Link Link icon

Brand Light Outline

Link Link icon

White

Link Link icon

Danger

Link Link icon