Overview

Button groups are layouts of buttons based around the actions and choices they are trying to convey to the user. Following consistent layouts and formations across an application improves familiarity for the user.

The groupings below are the most common groupings and exist as compositions in our Button Figma file.

Orientation

Our button groups can be displayed as vertically stacked or horizontally, the latter is more common on screens above our medium breakpoint. However, their horizontal orientation has some use cases on smaller screens, particularly nested inside cards.

The primary action should always be placed first in a vertical stack or to the right on a horizontal button group. As additional buttons are added into the grouped they are positioned based on importance.

Double Spacing

Button groups with three buttons have a key difference in that the tertiary button are double spaced when vertically stacked.

This is to create a clear separation of actions and avoid user error.

Surface Examples

Button styles are used in specific ways based on the surface that they sit above. The example below states the usage and corresponding styles.

Label Length

Labels vary in length, this can cause issues on smaller viewports. Try to keep buttons grouped but if required, drop into our stacked orientation.

Grouping Examples

Single Action

The simplest button group, in most cases this will be the primary action but there will be instances where other button styles make sense based on content.

 

Primary + Secondary

These actions are usually closely related and are grouped on horizontal and vertical stacked layouts.

Secondary Pair

Secondary pairs can be used when the key actions have equal weighting

Primary + Cancel

To reduce any accidental cancellation the cancel button is placed away from the primary action in the horizontal layout.

Primary, Secondary + Delete/Cancel

Following on from the patterns above the primary and secondary related actions are grouped together and delete or cancel is clear of the grouping. On stacked layouts there spacing is double the size to create the additional whitespace.

Constructive + Destructive

This button group builds on the same logic as the primary, secondary example but with the appropriate button styles.

Constructive, Destructive + Cancel

The grouping follows on from the above making sure that action are clearly separated by whitespace.

Next + Back

The primary and secondary buttons are positioned at either size of the screen to indicate direction. Stacked the next is closest to the content.

Additional Button Groups

Option Buttons

If a user is provided one or more options with equal importance then the same style should be presented. The style can vary based on the context of the decision, button groups should be used as a reference.

Pairing

Pairing buttons and using a combination of styles indicates that there are differences in action or intent. The ghost buttons paired with a primary can provide options but display intent.

Button Groups on Small Viewports

On small viewports the context of a flow may be better suited to a buttons being inline or stacked. It is at the designers discretion at what to use but a few guidelines should be observed.

• Suited to groups of two buttons
• The orientation, horizontal or vertically stacked, should be consistent throughout the whole user journey
• The label length should be considered. Unbalanced buttons may be more readable when stacked
• Inline buttons should not be expanded to fill 50% of the screen. They should hug the label with consistent padding and be aligned to the screen edges