Overview
Buttons are clickable elements used to perform actions.
Anatomy
Usage
When to use
- To communicate actions that can be taken by the user, such as submitting a form or starting a process
- To allow interactions
When not to use
- When it’s not the main call to action of a page, consider using links to navigate the user to other pages.
Behaviour
Hover
On hover, the button background will look slightly darker to signal the user that the action is enabled.
Click/Interaction
On click, the button will perform the enunciated action.
Disabled
When the button is disabled, it will have a transparency of 50%. The cursor won’t change when the user hovers the button.
Processing
When a process is being carried out in the background, to indicate progress a spinning icon will replace the text of the button.
Button Size
Buttons can be used in 3 sizes:
Default
This is the size most commonly used when vertical space is not a concern.
Inline
Use this size to place a button after a line of inline text, as a CTA for example.
Dense
To use in contexts where vertical space is limited, this size reduces the vertical padding.
Small
If you are working with small text and need a suitably sized button, this size combines a small font size with a tighter padding.
Variants
| Variant | Description |
|---|---|
| Default | Indicates a positive action that isn’t necessarily the main call-to-action |
| Base | Can be used to discreetly indicate a secondary action |
| Positive | Indicates a positive action that is the main call-to-action |
| Negative | Indicates a negative action that is destructive or permanent |
| Brand | Can be used with the main colour of your brand |
Default
Definition
A default button can be used to indicate a positive action that isn’t necessarily the main call-to-action. Can be used in isolation or alongside a primary button.
Usage
When to use
- To indicate a positive and/or less prominent action
- For secondary actions when a primary button for the main action is present
- For high emphasis actions when a base button is present
- For main actions when next to a link
When not to use
- Do not use as the main/prominent action when a primary button is also present
- Do not use as a negative action
- Do not use as a secondary action when a base button is present
Examples
Ubuntu.com
maas.io
snapcraft.io
Base
Definition
A base button can be used to discreetly indicate an action with less emphasis. It is often used alongside a default button.
Usage
When to use
- For low emphasis actions
- For secondary actions when a default or positive button for the main action is present
When not to use
- Do not use as the main/prominent action when a default or primary button is also present
- Do not use as a negative action
Examples
snapcraft.io
Positive
Definition
A positive button can be used to indicate a positive action that is the main call-to-action.
Usage
When to use
- To indicate a positive and/or prominent action
- For primary actions when other buttons or links are present
When not to use
- Do not use as a negative action
- Do not use as a secondary action
- Avoid using using multiple positive buttons per screen
Examples
ubuntu.com
snapcraft.io
Negative
Definition
A negative button can be used to indicate a negative action that is destructive or permanent.
Usage
When to use
- For destructive or permanent action. For example, to delete or remove user’s data.
When not to use
- Do not use as a positive action
Examples
ubuntu.com
Brand
Definition
A brand button can be used with the main colour of a brand.
Usage
When to use
- To indicate a positive action
- For secondary actions when a primary button for the main action is present
- For high emphasis actions when a base button is present
- For main actions when next to a link
When not to use
- Do not use as the main/prominent action when a primary button is also present
- Do not use as a negative action
- Do not use as a secondary action when a base button is present