Elements
Buttons
Buttons are interactive elements that people can use to take an action.
Guidelines
Buttons must be actionable. For example, they could be used to allow people to:
- submit information
- pay
- send a message
- download an app
Button text
Button text should be short. Try to keep it under 4 words.
Start button text with a verb (an action), for example, ‘book an appointment’.
Use sentence case, capital letters are harder to read.
Focus ring
The focus ring appears as a purple outline around any object, including buttons, when someone selects it.
Do not remove the focus ring. Some people who use assistive technology need it to navigate our products and services.
Accessibility
We’ve designed the buttons to include:
- a colour contrast of at least 4.5:1
- a hover state indicated by text underline and colour change
- a minimum target size of 45px by 45px
- a focus ring to let keyboard users to know where they are
The content within the button will determine the width of the button.
All attributes of a button are set to meet accessibility standards. Do not change the styling of the buttons.
Button types
Primary green button
Use this button for the main action on the page.
For example, you could use it to give users a way to:
- add a product to their basket
- go to the next step of a user journey
- submit a form
Primary white button
You can use this button in place of the primary green button if you’re using a background colour.
Secondary blue button
Use this button for a secondary, less important action on a page.
For example, you could use it to give users a way to:
- cancel an action
- see more information
- save and exit an application
Secondary grey button
You can use this button in place of the secondary blue button when using a background colour.
Small buttons
You can use a smaller button for your product or service if you need to.
All attributes of the small button are set to meet accessibility standards.
The CSS classes that support our small buttons already exist. If you’re unsure, ask the engineers on your team to talk you through them.
Loading buttons
Use this button when information has been submitted and the page will update.
The loading button gives people an indication that the information is being processed.
The page should then update to show either confirmation or any relevant error messages.
This is a new element in the Experience Library and needs more research. If you use the loading button, test it with people who use different assistive technologies.
Link buttons
If you are providing an action but it does not need to be as visually prominent as a button, you can style these actions as text links.
In the code, these still need to be defined as buttons for semantic and accessibility reasons.
App store buttons
If you're working on a native Apple or Android app, use these buttons to help users find the relevant app and then download it.
Changelog for this page
Date | Notes |
---|---|
3 June 2021 | First version of page published |