Buttons

Guiding principle: Be consistent.

When to use this component

Use buttons when you want the user to do something (often called a “call to action”), for example:

• start an application process or a transaction
• agree to make a payment
• download a PDF

Only use a button if you are encouraging an action.

Types of buttons

Primary buttons

Use a primary button to draw attention to the main action you want to help the user take.

Avoid using multiple primary buttons on one page unless the calls-to-action are all equally important.

When in doubt, the default action of a page should be triggered by a primary button.

Secondary buttons

Use secondary buttons for related but less important calls to action on a page.

Tertiary buttons

Use tertiary buttons for lower emphasis calls to action on a page. This is optional, and the form or site should still work even without including them.

Disabled buttons

Disabling buttons until users have correctly completed a form can cause usability and accessibility problems.

Disabled buttons can create barriers for assistive technology users and users with physical or cognitive impairments. They can also be confusing and frustrating for all users because they do not help the user understand what they need to do to proceed.

Instead of disabling a button, you should:

• keep buttons enabled
• develop error handling to provide feedback on missed fields or input errors

Button groups

Buttons can come in groups. Placing buttons next to each other creates a group of similar or related actions. A button group pairs a primary button with one or more secondary or tertiary options.

The primary button should:

• trigger the default action of a page
• be the first button to receive focus in the tab order

Use secondary or tertiary buttons for actions that may be expected, but used less often.

Order of buttons

Use buttons based on either:

• their hierarchy of importance
• relatively sensible order based on the most likely or most desired interaction

This will help users focus on the main goal of the page.

Example: desktop

---

Example: mobile

---

Button placement

Correct placement

Align buttons to the left to:

• encourage scannability and discoverability
• guide users through a clear path to completion

On larger screen sizes, people’s eyes typically follow an F-pattern. The F-pattern describes a common eye-tracking pattern, wherein users first scan horizontally across the top of a page or interface (the upper horizontal line of the “F”) and then vertically down the left side (the downward vertical line of the “F”).

By following the F-pattern, you’re making it easier for the user by placing the primary button where their eyes are naturally drawn to.

The "F" pattern

---

Left alignment is more convenient for users who use the tab key for navigation because they don’t have to look over on the other side of the screen.

It also helps developers because they don’t have to change the tabindex attribute as the button will remain the first element on the left after the last form item.

Incorrect placement

Incorrect placement includes:

• centred buttons
• buttons placed to the right
• splitting multiple buttons across the screen

These placements force the user’s eyes to travel further to look for other buttons, which means it takes longer for users to process meaning.

Do this

---

Don't do this

---

In addition, a screen magnifier user may miss important buttons not immediately found on the left.

Screen magnification level 400%

---

Exception

For close buttons that function as a way to dismiss or close a window or dialog box, place the button by the top-right corner.

Mobile

On mobile devices, the button set will stack vertically. The first button in the source order appears at the top of the column.

The first button is usually the primary. If you want to switch the order on mobile, you can change the button display order for small screen sizes by using push-pull classes.

Back buttons

Avoid placing a back button in a button group. For example, placing a back button next to a “Continue” button.

Follow the recommended placement of a back button at the top of the form.

Best practices

Do

• ensure button text is clear, descriptive and action-oriented (for example, “Save profile” or “Download receipt”)
• use sentence case (capitalize only the first letter of the first word)
• use a maximum of 25 characters including spaces
• ensure destructive buttons such as “Cancel” or “Delete” are visually distinct (for example, when presented with other options these can be a tertiary button. If necessary, confirm with the user to avoid accidental clicks)

Don’t

• change button colours
• underline text for primary or secondary buttons

Technical specifications

The width of buttons (minimum 160px) should be the size of the text label with additional padding:

• 24px internal padding on the right and left sides of the button text
• 16px internal padding on the top and bottom of the button text

The buttons in a group will be separated with a gap (32px). On mobile devices, the buttons are arranged vertically with a gap of (24px) between them. This is built into the button CSS.

Example: desktop

---

Example: mobile

---