# Description
All button types use fully rounded corners and can be used with or without an icon
# Button types
# Primary
Used to denote high importance.
The colour is solid with white bold text.
# Must include
- Label (centre aligned) - to communicate action that will be performed when user interacts with button.
- Container - where label for the button is housed.
# Optional
- Icon - to aid comprehension of button alongside a label.
- Two colours are available to be used for primary buttons:
# Usage
| Black button | Green button |
|---|---|
| Use throughout the ‘Browse’ section of the customer journey. For example, shopping for categories, applying filters and signing up for newsletters. | Use throughout ‘Buy’ section of the customer journey. For example, add to bag, checkout and sign in |
| Use for anything that is non-transactional. | To progress as a transaction for example, add to bag through to checkout. |
| Most important call to action on the page | Most important call to action on the page |
Do not use a black and green button on the same page. The button with the second highest importance should be demoted to a secondary button.
# Secondary
- Used to denote medium importance.
- The colour is solid NBUX white, has a 1px black border with NBUX black bold text.
- Use only when a primary button is on the page.
# Must include
- Label (centre aligned) - to communicate action that will be performed when user interacts with button.
- Container - where label for the button is housed.
# Optional
Icon - to aid comprehension of button alongside a label.
# Tertiary
Used to denote low importance.
Mostly used when paired with a primary button or secondary button
# Must include
Label (centre aligned) - to communicate action that will be performed when user interacts with button.
# Optional
Icon - visual aid for button.
# Button sizes
| Mobile | Desktop |
|---|---|
| Fixed height of 56px and should be full width (to the designers discretion) whilst ensuring it has a minimum horizontal padding of 24px. | Fixed height of 56px and must not be smaller than 132px wide. The width should be to the designers discretion in what they feel is natural in relation to the associated content whilst ensuring it has a minimum horizontal padding of 24px. More about desktop screen sizes here. |
# Labelling
When writing button labels, make sure the action is descriptive of what is going to happen next and use a maximum of 3 words.
Use 'active' voice wherever possible. For example when asking the customer 'Would you like to save your changes?' the labels 'Save' and 'Discard' are better than 'Yes' and 'No'.
# Rules
- Use bold text.
- Always use a fully rounded button.
- Check colour contrast ratios between background and text.
- Don’t use buttons that are full width on anything other than a mobile device.
- Don't use a display font in a button - this may be difficult to read.
- Minimum button size is 132px wide.
- Don't disable buttons.
← Breadcrumb Carousels →