Buttons

Buttons are clickable elements that are used across the platform to trigger actions, such as 'Add to bag' or 'Cancel'. They frequently communcate a call to action and allow the user to interact with the page in several different ways.

Example

Primary Button

A layout should contain a single prominent button that makes it clear that other buttons have less importance in the hierarchy. They direct the user’s attention to the primary action.

<button type="button" class="button primary">Shop Now</button>

Best Practice

• Be clearly and accurately labeled.
• Lead with a strong, actionable verb.
• Prioritize the most important actions. Too many calls to actiion can cause confusion and make customers unsure of what to do next.
• Be positioned in consistent locations in the interface.
• Buttons should be grouped when they're related actions.

Secondary Button

The secondary button is intended to play a more supportive or less important action role.

<button className="secondary button">
Add to Bag
</button>

Best Practice

• Consider using the Secondary button for things like ‘Edit’ buttons. The philosophy being, 'Edit' is a positive action, but not the definitive action, which would be saving the edit you made in the next step, therefor a Secondary action is more appropriate, and reserve a Primary action for the 'Save' or 'Done' step.
• Well suited to situations where there are multiple call to actions present (e.g. when there are a multiple buttons, all with equal weighting). In this case you could pair a Secondary button with a Primary button.

Tertiary Button

Tertiary buttons are usually used for miscellaneous actions: the action is important, but may not be what the user is looking to do right then.

<button className="tertiary button">
Add to Bag
</button>

Best Practice

• Avoid grouping too many buttons together - especially to account for smaller screen widths.
• This button is best used to minimise distractions to content.

Do

Use buttons in a consistant location.

Label buttons with what they do. Users should clearly understand what happens when they click on a button.

Don't

Use more than one primary button in the same space.

Make users hunt for buttons. If users can’t find a button, they won’t know that it exists.

Use too many words or go on to 2 lines with the text.