Button

Date adopted: 
January 17, 2018
Last update: 
October 26, 2020

When to use a button

Use a button to help users carry out an action on a page like starting an application, saving their information, or submitting an order.

When not to use a button

Do not use a button simply as a link to another page. Buttons are only used for actions.

Do not use a button to clear or delete a user's information. Instead, use a back link to go back and make changes.

If a user wants to stop using the service, they can close their web browser window.

How it works

Write button text in sentence case, describing the action it performs. Text usually follows a verb + noun pattern.

For example:

  • 'Start a payment' at the start of a service.
  • 'Renew another registration' to add another item to an order.
  • 'Continue to next step' when the service does not save a user’s information.
  • 'Finish and go to checkout' to make a payment.

You may need to include more or different words to better describe the action. For example, 'Add another claim' and 'Mail registration to a different address'.

Primary and secondary buttons

Align buttons to the left edge of your form.

Primary button

A primary button is the most important action a user can take on a page. There is only one primary button per page. For example:

Secondary button

A secondary button is the next most important or optional action a user can take on a page. For example:

Primary and secondary buttons together

Separate primary and secondary buttons with 'or.' For example:

or

If a primary and secondary button are not enough

You should do research with your users to learn what the most important tasks are and focus on those tasks. Other tasks could be part of other pages.

Disabled buttons

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

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