Button
Use buttons to help users carry out an action on a page like starting an application or saving their progress.
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except where:
- Spacing: The target offset is at least 24 CSS pixels to every adjacent target;
- Equivalent: The function can be achieved through a different control on the same page that has an area of at least 24 by 24 CSS pixels;
- User agent control: The size of the target is determined by the user agent and is not modified by the author;
- Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.
Note: Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders with granular values, color pickers displaying a gradient of colors, or editable areas where you position the cursor.
Button states
Primary buttons
Default
Disabled
Danger
Danger, disabled
Secondary buttons
Default
Disabled
Danger
Danger, disabled
When to use a primary button
Use a primary button to help users carry out an action on a page like starting an application or saving their progress.
A form always has a default button for it’s main action; Submit, continue, next.
More about when to use and not use buttons.
When to use a secondary button
Use a secondary button on pages that have more than 1 action or when users aren't noticing standard link text.
When to use buttons
Use buttons to start or save transactional journeys.
When not to use buttons
Do not use buttons as links:
- to pages which aren't part of your user journey
- from 1 flat content page to another
- to external websites
How to use buttons
Write button text in sentence case and describe the action the button performs. For example "Save and continue" or "Start now".
Align the primary action button to the left edge of your form.
Disabled buttons
Disabled buttons have poor contrast and can confuse some users. Only use them if user research shows it makes things easier for users to understand.
Accessibility
Make sure the text you use describes the action.
All 3 active buttons pass AAA guidelines for colour contrast. The colour contrast ratio between text and background colour is as follows:
- primary button 5.12:1
- secondary button 7.75:1
Please note that the disabled versions of the 3 buttons do not meet accessibility colour contrast ratios. If your team has discovered a user need for disabled buttons, use them carefully and test them with users with access needs.
Large buttons
In some contexts you may want to display a larger than usual button, for example as a Call To Action.
open this example in its own window
<button type="button" class="btn btn-primary btn-lg">Button</button>
{% from 'macros/component/button.html' import button %}
{{ button({
'label': 'Button',
'large': true
}) }}