Button

Buttons are used primarily for actions, such as 'Add' or Save'. Ghost buttons, which look similar to links, are used for less important or less commonly used actions.

View in Storybook

Anatomy

The button provides a call to action for all core and secondary interactions in a page or smaller container element such as a Modal or Menu.

Anatomy
  1. iconLeft (optional): To support a button label's context.
  2. Label: The description of a button.
  3. iconRight (optional): Additional iconographic support, usually a directional arrow.

 

Styles

Within the product, we provide consumers with 3 styles of Button, each having types - Filled, Outline and Ghost.

 

Primary

Primary buttons should be used for core actions to convey a positive or progressive action such as Save, Publish and Share.

 

Secondary

This should be used for lower-priority, supporting actions. Don't use this style for permanent actions and cross-page flows. You can use them with or without a primary button.

 

Danger

The danger button should be used for destructive, non-reversible actions that may require immediate attention.

 

Inverse

Use the inverted style for buttons on dark layouts, with an either transparent or primary-colour background.

Currently we are only supporting Ghost variant in React.

 

Disabled

Regardless of what type of button being used, our disabled style is universal across the product. The only instance it is not is when using our Inverse style.

Disabled

 

Sizes

Button is available in 3 fixed sizes and inline by default, where the width is based on the length of the text + icon(s) present. In certain instances within components, the button is full-width to fill the entire space of the container. The text + icon(s) present here are always centre-aligned.

 

The text in the Small variant is set to 12px and 14px in the Default and Large sizes.

Typically nested inside small components like inputs and banners

Typically nested inside small components like inputs and banners

Most widely used size for actions across the product

Most widely used size for actions across the product

Displayed in large component patterns like Modals

Displayed in large component patterns like Modals

 

Behaviour

 

Loading

When a button has to initiate a loading state, the width of the button remains the same as it was with any text and icons displayed. The colour of the spinner is inherited from the colour of text and/or icons it follows.

 

 

Usage

There are three distinct patterns when it comes to button placement. These are labelled as Z, T and F patterns which reflect how the content flows in between call to actions.

Z-pattern

The Z-pattern is our most common button placement pattern: the task starts at the top left and ends with a primary CTA on the bottom-right side of the container. This pattern is reversed for right-to-left languages.

 

The T-pattern is the way of showing a call to action, used mainly in media objects and other relevant areas in product pages.

The T-pattern is the way of showing a call to action, used mainly in media objects and other relevant areas in product pages.

The F-pattern is the way of going through content in a non-constrained container, like a form. The user will go through the content line by line, and find a call to action at the end.

The F-pattern is the way of going through content in a non-constrained container, like a form. The user will go through the content line by line, and find a call to action at the end.

 

 

Best practice

Buttons need to be clear to consumers and demonstrate the correct level of priority on-screen.

 

  • Communicating an action that will occur.
  • Use a primary button to indicate the main action of a group button set.
  • Subtle or secondary buttons by definition should be used for lower priority actions.
  • Consider the size of the button you are using, depending on screen resolution and other similar sized components it can sit alongside.
  • Use action verbs or phrases to tell the user what will happen next.

 

Do's and Don'ts

✅ Use short words for actions with specific intention. Be clear and concise.

✅ Use short words for actions with specific intention. Be clear and concise.

🚫 Don't make the copy wrap on two lines.

🚫 Don't make the copy wrap on two lines.

 

✅ Use the correct alignment of text and any accompnanying icons.

✅ Use the correct alignment of text and any accompnanying icons.

🚫 Don't vertically align the icon or text in the centre of the button.

🚫 Don't vertically align the icon or text in the centre of the button.

 

✅ Clearly distinguish the main CTA from the secondary one using a ghost or outlined button.

✅ Clearly distinguish the main CTA from the secondary one using a ghost or outlined button.

🚫 Don't use filled buttons next to each other, especially when the actions are not on the same priority level.

🚫 Don't use filled buttons next to each other, especially when the actions are not on the same priority level.

 

✅ In cards with more than one button, the button size should hug the content.

✅ In cards with more than one button, the button size should hug the content.

🚫 When using more then one button on containers in a single row, don't use filled button alignment.

🚫 When using more then one button on containers in a single row, don't use filled button alignment.

 

✅ Use the danger button when we want to display destructive actions.

✅ Use the danger button when we want to display destructive actions.

🚫 Use a primary button when it has a destructive action connotation.

🚫 Use a primary button when it has a destructive action connotation.

 

Also see