We're creating a new front-end 'Experience Kit'
For more information go to the #Experience-library-support Slack channel (Co-op colleagues only).
Elements
Buttons
Buttons allow people to take an action on an app or website.
Guidelines
Buttons must have an action. For example, they can allow users to:
- submit information
- pay
- send a message
- download an app
- go to a next step
Button text
Keep button text short, using no more than 4 words.
Start with a verb (an action), for example, ‘book an appointment'. The action should describe what happens next.
Use ‘Go to’ instead of words like 'see' or 'view' as these are not inclusive. Not everyone can see or view things.
Use sentence case. Capital letters are harder to read. Sentence case means using a capital for the first letter of a sentence, then lower case for the rest of the sentence.
Button design
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.
Go to the design guidelines on colours.
Go to the accessibility standards.
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.
Button types
Primary green button
Use this button for the main action on the page or section.
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
- get a quote for one of our services
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 tells users that the information is being processed.
Change the action content to the ‘-ing’ form of the verb to show the action is happening now. For example, a button would say 'Sign in' but once it’s pressed, the loading button would say 'Signing in'.
The page should then update to show either a confirmation message or an error message.
If you use the loading button, test it with users of 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 use 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 |
|---|---|
| 21 Jan 2026 | New guidance on button text (including loading button text) |
| 3 June 2021 | First version of page published |