A button group displays multiple related actions laid out horizontally to help with arrangement and spacing.
Figma
The Figma reference for ButtonGroup will appear here once the design link is added.
Storybook
Interactive examples for ButtonGroup will render here once the Storybook link is wired in.
Best practices
- Group actions that are related to one another.
- Order actions by importance, with the primary action first or last consistently across the product.
- Use segmented groups only when the actions are mutually exclusive options.
Do’s and don’ts
Do
Keep a group focused on a small set of closely related actions.
Don’t
Collect unrelated actions into one group just to save space.