---
title: "Adding a Button on a page"
canonical: "https://nsw-gov-au-help-hub.refined.site/space/HHK/601784661/Adding%20a%20Button%20on%20a%20page"
format: markdown
---
A Button is a stylised link that's visually very prominent and provides a strong call-to-action. Use Buttons when you want your audience to take an action, for example, 'Apply now', 'Register' or 'Download'. 

> ℹ️ #### Using either Buttons or Links
> ℹ️ 
> ℹ️ - Use Buttons for actions.
> ℹ️ - Use Links to direct the audience to another page or resource.
> ℹ️ - [Learn more about using Links](https://nsw-gov-au-help-hub.refined.site/space/HHK/604114387/Guidelines+for+using+links+on+nsw.gov.au).

## 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 names as 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. If you're using more than 1 button, only 1 should use the primary styling and further buttons should use the Secondary or Tertiary styling.

## How to add a Button inside the WYSIWYG editor

1. In your WYSIWYG block, highlight the text that you want as your button label. Then select the Link icon.
2. 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.
3. You can use the optional toggle field to make your Button **Full width.**
4. Expand the **Advanced** section.
5. Leave the **Title field** blank. The CMS will create its own hover text/label.
6. Enter your alt-text in the **ARIA label** field. This is mandatory. The alt-text must fully describe the action that will occur if a user selects the button.
7. Do not add any text to the **CSS classes**, **ID** or **Link relationship** fields.
8. Do not change the text in the **Displayed text** field. This is the text you highlighted as your button label in step 1.
9. In Link URL field, **search for your content link or managed link and select from the returned results**. For a content link, enter the title of your content or enter the internal node pathway, for example, /node/1234. For external links enter the title of the managed link. Never add a direct URL to this field.
10. Select the green** insert **field to add the Button to your page.
11. After creating your button, you can use the Edit > Link properties to select the option to **Open in a new window**.
12. **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 going to the **Layout** screen, selecting **Add block, Add content block **and selecting **Button**. To complete the button set-up follow the same instructions as in 'How to add a Button inside the WYSIWYG editor'.

> ℹ️ ### See buttons on [http://nsw.gov.au](http://nsw.gov.au) 
> ℹ️ 
> ℹ️ Visit [Buttons](https://www.nsw.gov.au/onecx-program/content-guidance/cms-components-guide/content-block/wysiwyg-editor/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](https://www.nsw.gov.au/money-and-taxes/cost-of-living-hub)
> ℹ️ - [Customer Service: Free training and coaching](https://www.nsw.gov.au/mental-health-at-work/free-training-and-coaching)
> ℹ️ - [Customer Service: Young people](https://www.nsw.gov.au/living-in-nsw/young-people)
> ℹ️ - [ID Support NSW](https://www.nsw.gov.au/id-support-nsw)
> ℹ️ - [Transport for NSW: Driving in NSW](https://www.nsw.gov.au/driving-boating-and-transport/driving-nsw)
> ℹ️ - [Youth Justice: Information for parents, guardians and carers](https://www.nsw.gov.au/legal-and-justice/youth-justice/parents-guardians-carers)