Overview

Button group

Button groups are the logical organisation of multiple buttons, so that users can make informed decisions and take action. It's commonly used in forms, dialogs, and task flows. Buttons can be stacked vertically or placed side by side.

Button group

Usage

When to use
Use button groups when there are multiple related actions.
In multi-step forms
When a user is progressing through a series of steps in a form, such as an onboarding process, use a primary button for the user to proceed to the next step ('Next', 'Confirm') and secondary button to go back ('Back').
When there's a main action or journey
When we want to direct the user to take a specific action or start a journey, use a primary button for the main action or journey you want the user to take, and a secondary button to provide a related, but secondary action or journey.
When there's a less recommended action
When you have a less recommended action to offer alongside a primary action, use a tertiary with underline along with the primary button. For example, 'Confirm' with 'Cancel'.
Don't
Don't pair a secondary button with a tertiary button. Always make sure you have a primary button in a button group so users are guided towards the most important action or journey.
Don't
Don't put too many options together in a button group. Limit it to just two.
When not to use
Don't use button groups as tabs
Button groups are not meant to be used to group related content together. Use Tabs instead.
Don't use a button group to indicate a selection
We don't use a button group to indicate the user's selection. For that purpose, use a toggle or radio button instead.