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.

Drag to resize example

Props

children
React.ReactNode
Button components
segmented
boolean
Join buttons as segmented group

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.