Buttons

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

• Disabled buttons can be harder to see, so avoid using them where possible
• Consider the GOV.UK guidance on how to stop users from accidentally sending information more than once
• Overusing buttons and button-style links makes them less noticable
• A comprehensive review of buttons vs. links is available from Indiana University - Buttons & Links - the Basics

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.