A button triggers an intentional action on a page, representing the moment when a user commits to a task, transitions to new content, or confirms a decision. The button system consists of four variants, each calibrated for a specific place in the hierarchy of user actions. By matching visual prominence to task importance, each variant helps users navigate with intent and confidence.
Primary button
The Primary button is designed for users to perform the main intended task on a webpage, such as form submissions, confirmations, and advancing workflows. Use this when the user is completing a defined task (i.e. 'Submit', 'Save', 'Confirm') or is progressing to the next step in a user journey. Use on a campaign page for the critical call to action (CTA)
Do's
- Make sure the button‘s content represents an action such as 'Submit' or 'Register'
- Try to use a verb in the button
- If you add an icon to the text button, ensure the label works as a standalone
- When using in an icon-only configuration, always fill the label, in order to provide context to screen readers
Don'ts
- Do not overuse. Using a primary button for all actions detracts from what is important in terms of a user completing a task
- Do not use an icon when it is not relevant or necessary to the action
When to use
- As a primary action, to submit, save, perform a new task or move to the next step
When not to use
- Do not use for secondary or negative actions (i.e. 'Cancel', 'Delete') - opt for a Secondary button instead
- Do not use for lower priority actions (i.e. 'Show more', 'View details') or where the action is about information that is not essential to the main goal of the page - opt for tertiary buttons instead
- Do not use for navigation or download actions – use Links or Files components instead
Secondary button
Use the Secondary button in connection with lower-ranking actions on a web page. It is often paired with a primary button and can serve as the negative action of the pair, such as 'Delete', 'Cancel', 'Remove'.
Do's
- Ensure the secondary button functions as a negative action, such as 'Cancel', 'Delete', 'Remove, 'Replace' next to the primary button
- When adding an icon to the text button, ensure the label works as a standalone
- When using in an icon-only configuration, always fill the label, in order to provide context to screen readers
Don'ts
- Do not assign an action that should be assigned to a CTA or another type of button
- Do not use an icon when it is not relevant or necessary to the action
When to use
- As a secondary action or to indicate a negative action, paired with a primary button
- As a secondary action next to the primary button - such as 'Cancel', 'Reject'
- Next to the primary button if it is a 'yes' or 'no' scenario
When not to use
- Do not use for primary and positive actions (i.e. 'Submit', 'Send'); opt for the Primary button instead
- Do not use for navigation or download actions – use Links or Files components instead
Tertiary button
Use a Tertiary button on a web page for the least prominent actions. It can be grouped with other buttons or placed independently.
Do's
- Ensure the button represents a less important action, such as 'Show more', 'Expand' or 'See details'
- When adding an icon to the text button, ensure the label works as a standalone
- When using in an icon-only configuration, always fill the label, in order to provide context to screen readers
Don'ts
- Do not use it when the action has high importance in the hierarchy or is crucial to task completion
When to use
- Use in neutral scenarios, when the main focus should be the content and not the button
- Use when you want to place an action of lower importance in a button group
When not to use
- Do not use for primary and positive actions (i.e. 'Submit', 'Send'); opt for the Primary button instead
- Do not use for navigation or download actions – use Links or Files components instead
Call to action (CTA) button
Use a Call to action (CTA) button to draw users' attention to the most important action on a web page. The visual style has bright high-contrast background colour, paired with a label that indicates the importance of the action intended.
Do's
- Ensure the button label directs to a pre-defined goal, such as 'Search by priority'
- When adding an icon to the text button, ensure the label works as a standalone
- When using in an icon-only configuration, always fill the label, in order to provide context to screen readers
Don'ts
- Avoid using more than one Call to action button per page (except where there are several main actions or you repeat one action on the same page)
When to use
- Only use to indicate main goal or to strongly suggest something that the user should do
When not to use
- Do not use for primary and positive functional actions (i.e. 'Submit', 'Send'); opt for the Primary button instead
- Do not use for secondary and negative actions (i.e. 'Cancel', 'Delete') - opt for the Secondary buttons instead
- Do not use for lower priority actions (i.e. 'Show more', 'View details'), nor if the action offers information that is not essential to the main goal of the page - opt for Tertiary buttons instead
- Do not use for navigation or download actions – use Links or Files components instead