View in Storybook
Anatomy
ButtonGroup uses our Button component together to display a string of actions. We remove the corner radii on the central buttons to create the grouping effect. All other states and props can be applied to any button.
- Button: A set of up to 6 buttons can be used at any one time.
Types
Primary
Our primary ButtonGroup is used for selecting options within a page or container.
Secondary
The secondary variant is used to toggle between sections but not at page level. Page level switching would be for Tabs.
Usage
Amount
A maximum of 6 buttons together offers users plenty of options without being too confusing to navigate.
Selectable
ButtonGroup can also be used to toggle between sections of content. We recommend using the Secondary type to help emphasis the selected button.
Disabled
Certain actions may be triggered by other user interaction so disabled states are available.
Full width
ButtonGroup can fill the width of the container it occupies, in the same way as our Tabs can do.
Best practice
- Group together calls to action that have a relationship
- Look to use icons in groups of buttons to help them be more clear to users.
- Use the Secondary variant when using ButtonGroup to toggle between sections on a screen.
Do's and Don'ts
|
Do |
Don't |
|---|---|
|
✅ Use between 2 - 6 buttons in any one group. |
🚫 Truncate or wrap words in a button. |
|
✅ Keep the labels simple and to the point. |
🚫 Use more than 2 words in each button within a group. |
|
✅ Use icons to help support the label in buttons. |
|