Button group
A button group lets users choose an action from a set of options.
How to use a button group
When using a button group:
- Make the primary action clear and give all the actions a different level of priority
- Primary actions can be right or left aligned according to design needs, but should stay consistent within journeys
- Check that the tab order follows the reading order, going from left to right and top to bottom
Example of a button group
Copy guidelines
Button labels should make it easy to understand what will happen if the button is pressed. Ask yourself: ‘If a user doesn’t read any other content on this page, will they understand what this button will do?’
Lead with a strong, actionable verb paired with a noun.
Do
Don't
Make sure your button label fits on one line.
Do
Don't
Start with a capital letter and use sentence case, but don’t add full stops.
Do
Don't
Avoid using ‘my’ or ‘your’ in button labels.
Do
Don't
Do
Don't
Was this page helpful?
Get in touch
Our team can answer any questions about using button groups or give you a helping hand with your next project.