Buttons
A button should only be used when you want the audience to take action, for example, 'Apply now' or 'Register'.
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.
Button styles
Button type | Guidelines |
---|---|
Primary |
|
Secondary |
|
Tertiary |
|
Alert |
|
How to add a button
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.
Live examples
You can see live examples of how agencies have applied buttons to their content.