Buttons
Required for NSW Government Masterbrand products
Buttons provide users with the ability to submit an action.
Show code Hide code
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
Guidance
- use a button when selecting it performs an action, such as submitting, saving, cancelling or deleting
- use a clear label that describes the action and what will happen
- use the brand button for the primary action and outlined buttons for secondary actions
- use the danger button to confirm a destructive action, such as delete
- pair an icon with text and ensure the icon supports the intended action
- use a button to navigate to another page or another part of the current page; use a link instead
- use vague labels that do not explain the action
- overuse buttons and button-style links, as this makes them less noticeable
- use an icon on its own when its meaning may be unclear
- use disabled buttons unless research shows they help users understand the interface
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.