Adding a Button on a page

You should only use a button when you want the audience to take action, for example, 'Apply now' or 'Register'.

Using either Buttons or Links

• Use Buttons for actions.
• Use Links to direct the audience to another page or resource.
• Learn more about links

On this page

• When to use Buttons
• How to add a Button inside the WYSIWYG editor
• How to add a standalone button on a landing page
• Guidelines

When to use Buttons

Do

• Use Buttons for actions you want the audience to take.
• The Button label should be short and clear about the action you want the audience to take — limit of 50 characters. Try to limit the Button text to 2 to 4 words.
• Start your Button text with a verb, for example 'Apply now' or 'Book your ticket'.
• Button text should be sentence case and without a full stop.
• Align Buttons to the left.
• The content directly before the Button should give the audience the context for what action you want them to take when clicking the Button.
• Ensure that the Button text reflects where the Button link is directing the audience.
• Use a Button for a section with a single call to action.
  • Define the call to action section with a line separator above and below.
• Check the Button display on mobile and set the Button to full-width if required.

Don't

• Don't use generic named Button labels, for example 'Click here' or 'More information'.
• Don't include more than 1 primary Button in a section. Multiple Buttons may confuse the audience.

How to add a Button inside the WYSIWYG editor

1. In your WYSIWYG block, highlight the text that you want to inside your Button, then click on the Link icon
2. Enter the URL that you want your Button to link to. For internal pages enter the page title and select it from the drop down, or enter the internal node pathway, for example, /node/1234.
   For external links enter the URL pathway. For external links you'll also need to add a Title for the link, such as the page title of the URL.
3. Choose your Button styling from the Styling drop down:
   • Primary
   • Secondary
   • Tertiary
   • Alert.
   The Dark option of the primary and secondary button should be used on white or light coloured backgrounds. The Light option should only be used on dark backgrounds.
   
4. You can use the optional fields to make your Button Full width, add Advanced styling, or Open in a new window
5. Click the green tick to add the Button to your page
6. Save your page to display the Button. Remember to check that the link is working

How to add a standalone button on a landing page

A standalone button can be added on a landing page by selecting Button from the list of content blocks.

Guidelines

• Limit of 50 characters for Buttons and text links.
• Place a section separator above and below your call to action to create a section, as seen in the below examples.
• Use Buttons for actions and links to take people to another page.
• Use a Button for a section with a single call to action.
• Use links for a section with multiple calls to action.
• Align Buttons to the left of the page.
• Set Buttons to stretch to full page width on mobile.
• Avoid disabled Buttons as they can be problematic.
• Include an 'external link' icon after links that link to other websites.

See buttons on nsw.gov.au

Visit Buttons to see this how this works on a live page.

You can also see live examples of how agencies have applied buttons to their content below:

• Customer Service: Cost of Living hub
• Customer Service: Free training and coaching
• Customer Service: Young people
• ID Support NSW
• Transport for NSW: Driving in NSW
• Youth Justice: Information for parents, guardians and carers

Need any more help?

If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.