Buttons are used to initiate actions within an application, website, or other digital experience. Their labels clearly describe the action they trigger.
Button types
Usage
Options
There are two options for placing icons within buttons: Icon left aligned and icon only.
It's important to use only one icon per button, as multiple icons can be confusing and make it difficult for the user to understand the button's purpose.
Colour
The use of colour in buttons should align with their semantic meaning, meaning that the colour of the button should convey the purpose or meaning of the button's action. However, it's important to note that colour is not a universal experience, as different people may have different associations with and perceptions of specific colours.
Danger/warning actions
Danger - irreversible actions
Red button is used for an action that is irreversible like deleting requirements, goals, tasks.
[IMAGE]
Warning - reversible actions
Orange button is used for an action that can be reversed or reapplied like removing owners and reminders, unlinking regulations.
[IMAGE]
Sizes
Usage
Interactions
States
Behaviour
Style
Alignment
Button groups are aligned right. The primary or destructive button is always the right most button in a group. Cancel is always left most in the group.
Specs
Padding
Grouping buttons
When grouping buttons, we keep a relative spacing between different sizes of buttons.
Microcopy guidelines
Button labels
Button text should clearly explain the action users will take once selecting the button. Avoid ambiguity. This is important for accessibility, UX, and SEO.
Do: Learn About Services
Don't: Learn More
Word length
Keep text succinct, fewer than three words, if possible.
Use verbs first
Buttons trigger actions so start button labels with verbs. Exception: “Next” or “Back.”
Do: View Product Details
Don't: List of Details
Learn more about microcopy
Read our articles on best practice for writing text for UI and learning more about our language.