# Component

All button types use fully rounded corners - "make buttons look like buttons"

# Primary button

Used to denote high importance.

The colour is solid (usually black, or green) with white text.

These buttons are used for the most important call to action on the page. They shouldn't have any other visual noise around them as this can take the focus from the button.

Primary buttons can be used with or without an icon.

Primary button

# Secondary button

Used to denote medium importance.

These buttons always have a white background and a dark border. We use these as secondary actions.

They're usually used when there's also a primary action (solid button) on the page.

Secondary buttons can be used with or without an icon.

Secondary button

# Tertiary button

Used to denote low importance.

Text buttons are mostly used when paired with a primary or secondary button, when we want to nudge our customers to perform a particular action.

Tertiary buttons can be used with or without an icon.

Tertiary button

Do

  • On all buttons, show visual feedback when a button is interacted with: on hover, on click, on focus
  • Use bold text
  • Always use a fully rounded button
  • Check colour contrast ratios between background and text

Don't

  • Don't ignore the minimum button size - customers need to be able to tap on a button
  • Don't use a "Brand" font in a button - this may be difficult to read
  • Don't use different font weights
  • Don't use different border radius for primary buttons - be consistent

# Size

NBUX buttons are 56pt high and buttons with text must be a minimum of 132pt wide.

Height Horizontal Padding Type Icon size Gutter
56pt 16pt 16pt - bold 24pt 8pt

Don't

  • Don't use buttons that are full width on anything other than a mobile device

# Elevation and shadows

Elevation styles can be applied to buttons, if you want to give them more prominence. See elevation for more info.

# Labelling

When writing button labels, make sure the action is described via the label.

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'.

Do

  • Keep labels short and to the point.

# Letter case

# Sentence case

For example: ''Create an account''.

Sentence case should always be used - it improves readability and scanability. Almost everything a user reads is written in sentence case, which means they are most familiar with it.

# Title case

For example: ''Create An Account''

There is evidence that use of capital letters slows the ability for people to scan content; it breaks the natural reading flow and distracts users from the underlying message.

Do

  • Use sentence case for button labels

Don't

  • Don't write button labels in all caps or title case

# Word count

Keep button labels to a maximum of one line of text. A label that has multiple lines can affect a button shape, which can make it look like text in a box rather than a button.

Do

  • Use a maximum of 3 words in a button, e.g. "Add to bag" or "Confirm and pay"

Don't

  • Don't wrap button labels over multiple lines

# Button placement

Arrange copy and buttons in a way that encourages a natural reading flow that ultimately leads customers to the button. Follow Fitt's law.

Placement in Dialogs

Dialogs present a focused and limited set of actions, which are generally affirmative or dismissive.

  • Affirmative actions are placed on the right and continue the process. Affirmative actions may be destructive such as ''Delete'' or ''Remove''.

  • Dismissive actions are placed directly to the left of affirmative actions and return the user to the previous screen or step in the process.

Do

  • Place affirmative actions on the right
  • Place dismissive actions on the left

# Structure

NBUX buttons are 56pt high and buttons with text must be a minimum of 132pt wide.

Height Horizontal Padding Type Icon size Gutter
56pt 16pt 16pt - bold 24pt 8pt

Don't

  • Don't use buttons that are full width on anything other than a mobile device
Last Updated: 10/19/2020, 12:17:17 PM