Alpha This is a new service that we're still developing. Try the service and send us your comments and suggestions. Your feedback will help make the service easier to use for everyone.

Buttons

When to use this component

Use the button component to help users carry out an action like starting an application or saving their information.

How it works

Write button text in sentence case, describing the action it performs. For example:

  • ‘Continue’ when the service does not save a user’s information
  • ‘Save and continue’ when the service does save a user’s information
  • ‘Add another’ to add another item to a list or group
  • ‘Pay now’ to make a payment
  • ‘Confirm and submit’ on a review page that does not have any legal content a user must agree to
  • ‘Accept and submit’ on a review page that has legal content a user must agree to
  • ‘Sign out’ when a user is signed in to an account

You may need to include more or different words to better describe the action. For example, ‘Add another address’ and ‘Accept and claim a tax refund’.

Align the primary action button to the left edge of your form.

Default button

Use a default button for the main call to action on a page.

Avoid using multiple default buttons on a single page. Having more than one main call to action reduces their impact, and makes it harder for users to know what to do next.

Link as a button

Use a link button when a button is needed as part of a flow, but the button itself does not sumbit data as part of a form. Links are used for navigation, link button should serve the same purpose.

Secondary buttons

Use secondary buttons for secondary calls to action on a page.

Pages with too many calls to action make it hard for users to know what to do next. Before adding lots of secondary buttons, try to simplify the page or break the content down across multiple pages. Secondary buttons work great for cancel buttons.

Combination default and secondary buttons

You can use secondary buttons in combination with default buttons.

Disabled buttons

Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.

When possible use an active button and, if clicked, display an error explaining why clicking the button won't work. If users are often triggering this error there may be an issue with your interface, consider completing user research to determine the exact reason for the problem.

Only use disabled buttons if research shows it makes the user interface easier to understand.

If you are including a disabled button, be sure to code it correctly so that visually impaired users will be able to perceive that there is a button but it's not active. You can do this by including the aria-disabled="true"

Button error message

Button errors can be used instead of disabled buttons. This allows gudiance to be given at the time it's needed. You must link the errors in the button error to the answer they relate to. For questions that require a user to answer using a single field, like a file upload, select, textarea, or text input, link directly to the field. The field or answer linked to the button error must also display a matching error message.

Error:Before continuing: enter a first name
Erreur : Avant de continuer, entrez votre prénom.

Action buttons

Use an action button for buttons that will tigger an irreversable action such as a ‘Confirm and submit’ or ‘Pay now’ button. These buttons usually appear at the bottom of a review page.

Warning buttons

Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.

Only use warning buttons for actions with serious destructive consequences that cannot be easily undone by a user. For example, permanently deleting an account.

When letting users carry out an action like this, it’s a good idea to include an additional step which asks them to confirm it.

In this instance, use another style of button for the initial call to action, and a warning button for the final confirmation.

Do not only rely on the red colour of a warning button to communicate the serious nature of the action. This is because not all users will be able to see the colour or will understand what it signifies. Make sure the context and button text make clear what will happen if the user selects it.

Button sizes

There are three different sizes of buttons available. The large button should be used in almost all cases. Only use smaller buttons if it has been shown to improve usability.

A / B option buttons

Use A / B option buttons when asking simple questions that have clear and straightforward answers. They help, for example, to determine a user's eligibility for a service. See question page templates for when and how to use A / B option pages and other types of question pages. The order of A / B option buttons (should yes or no come first?) matters less than the clarity of the question. If the question is simple and well written, which button comes first won't matter. User testing will help you figure out which questions need work and if you need to change the order of your buttons.