Skip to main content

Button group

Button group displays multiple related actions in a row to help with horizontal arrangement and the spacing of calls to action.

Examples

Use when you have multiple buttons to space them out evenly.

Result

Properties

React

HTML

Props

children

React.ReactNode

Button components

segmented

boolean

Join buttons as segmented group

True

False

Best practices

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

Content guidelines

Follow the content guidelines outlined in the button component.