Button group displays multiple related actions in a row to help with horizontal arrangement and the spacing of calls to action.
Use when you have multiple buttons to space them out evenly.
<ButtonGroup> <Button>Cancel</Button> <Button primary>Save</Button> </ButtonGroup>
Put the merchant first by identifying the problem they face and the component that helps them solve it.
Merchants need to understand when a set of actions are related so they can take the appropriate next step.
Button group lays out a set of buttons horizontally as a set and lets them wrap if necessary.
Button groups should:
- Only use buttons that follow the best practices outlined in the button component
- Group together calls to action that have a relationship
- Be used with consideration that too many calls to action can cause merchants to be unsure of what to do next
- Be thoughtful about how multiple horizontally placed buttons will look and work on small screens
- Only be used in groups of up to six buttons if the buttons contain an icon with no text
Follow the content guidelines outlined in the button component.