Last reviewed: 27 July 2021

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.

Go to the foundations.

Go to the design guidelines on colours.

Go to the accessibility standards.

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.

Go to the design guidelines on colours.


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.

Go to the design guidelines on colours.


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

Get support

Ask us about anything that’s featured on the Experience Library, or any questions about design, content or development.

#experience-library-support

Co-op Experience Library

Get email updates

Find out about the latest content, changes or developments to the Experience Library.

Sign up

Copyright © Co-operative Group Limited. All rights reserved.