Button

How to use buttons

Buttons can be used in dialog boxes, forms, cards or toolbars.

When using buttons:

• Use the button component if the button will trigger an action on the current page
• Position buttons in locations that are easy to find and consistent
• Write button labels that tell people what will happen when the button is used

Styles of buttons

Buttons come in 3 styles for 3 levels of emphasis. Which one you use depends on the importance of the action.

Primary button

Use a primary button to give a high level of emphasis to an action. This should be the main call to action on a screen. Only include one primary button per screen.

Secondary button

Use a secondary button to give a medium level of emphasis to an action. These should be secondary calls to action on a screen. Only use a secondary button when the page already includes a primary button.

Tertiary button

Use a tertiary button to give a low level of emphasis to an action. These should be sub-tasks or less important calls to action. Only use a tertiary button when a screen already includes both primary and secondary buttons.

Types of buttons

Buttons also come in different types, with and without icons.

Text button

A text button is the standard type of button.

Icon and text button

Use a text button along with an icon to help people understand what the button does. The icon should reflect the meaning of the text.

Icon button

Only use an icon button when the context makes it completely clear what the button's for. Include a text label too, wherever possible. Read the accessibility section for more guidance on using icon buttons.

Full Width Button

Use a full width button when you want to give a button more prominence on the page. This is useful for buttons that are the main call to action on a page

Button schemes

Buttons also come in different schemes for different contexts.

Brand

Use brand schemed buttons to highlight the strongest calls to action on the page. They're good for positive experiences and journeys, such as completing a purchase. They use a primary colour from the brand colour palette. These can be viewed using the theme displayer at the bottom of the page.

Light

Light and dark schemed buttons can improve contrast against coloured backgrounds. They can also be used for lower priority calls to action.

Dark

Light and dark schemed buttons can improve contrast against coloured backgrounds. They can also be used for lower priority calls to action.

Button disabled states

Disabled states indicate an action that can’t be taken yet. Don’t use disabled buttons if people can’t take steps to enable it.

It shouldn’t be necessary to read the text on a disabled state element to complete a task, as people with low vision might find it impossible to read the label of a disabled state button.

Content guidelines

Button labels should make it easy to understand what will happen if the button is used. People should be able to understand what the button will do, even if they haven't read any other content on the page.

Lead with a strong, actionable verb paired with a noun.

Make sure your button label fits on one line.

Start with a capital letter and use sentence case, but don’t add full stops.

Avoid using ‘my’ or ‘your’ in button labels.

Was this page helpful?