Buttons
Buttons are designed to help the user complete actions. They can help us guide the user through a journey. We use a mix of button states and styles to clearly communicate to users when individual buttons are selected and to help show which actions are more important on a page.
How to use buttons
Each page should only have one primary CTA, to make it clearer to users what they should do next. Buttons can be used to take users to another page on our site, to take users to another site or to download something. If the button is a download link, remember to include the download link styling. You shouldn’t use the text CTA styling on a button.
You can have more than one secondary CTA, but avoid having too many. Before adding lots of secondary buttons, try to simplify the page, break the content down across multiple pages or make a clearer decision about where the user should go next.
You can use both buttons together if you need to – for example a ‘Continue’ button and a ‘Cancel’ button next to each other.
These guidelines don’t apply to the card component. Although this component contains buttons, you can use any number of them on a page. Read the guidelines about cards
Adding a button in the CMS
You can add a button to a panel alongside other elements like a heading or paragraph text. You can also add it to components like accordions, 50:50s or callout boxes. Buttons are included in some templates, which you can edit or remove.
To add a button, you can:
- Add a ‘link component’ and select the ‘show as a button’ option. This will default to a primary button, or you can select ‘Show as a secondary button’ to use the secondary styling
- Add a link in the rich text editor, and then go to the ‘formats’ menu, go to ‘Buttons & Links’ and select either a primary or secondary button
- Add a ‘Download link component’ and select the ‘Show as a button’ option. This will default to a primary button. To add a download link as a secondary button, you’ll need to add it through the rich text editor, and then select both ‘Download link’ and ‘Secondary’ from the formats menu
If your button goes to an external site, remember to select the ‘Opens in a new window or tab’ option when adding your link.
When you add a button in the CMS, you don’t need to worry about which colours to use. The right colours will be pre-set for you depending on the site you’re working on and whether you select a primary or secondary button.
Button modifier rules
Buttons are unlikely to be in a panel on their own. Follow the modifier rules for whichever component or panel your button sits within.
Accessibility
We’ve designed and built our buttons so that:
- They’re actionable by both a mouse and a keyboard
- The text on the button can be read by screen readers
- They meet colour contrast requirements
- Their minimum size is easy to select and there’s enough padding around each button that users won’t select the wrong one by accident
- Screen readers are alerted when a button is an external link that opens in a new window
When adding buttons to a page, you should:
- Make sure the text on the button clearly describes the action – for example ‘Contact us’ or ‘Submit’
- Clearly indicate if the button goes to an external site by using the external link icon (you can select this in the CMS)
- Make a conscious decision whether to use primary or secondary styling
- Consider whether a text link is more appropriate
Evidence and research
We have reduced the amount of link and button styles. Using less styles means users can quickly identify where they can click and reduce the probability of overlooking important links. In testing users have been able to clearly recognize the link and button styles.