Button group

Button group displays multiple related actions stacked or in a horizontal row to help with arrangement and spacing.

Examples

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

Drag to resize example

Props

children
React.ReactNode
Button components
connectedTop
boolean
Remove top left and right border radius
fullWidth
boolean
Buttons will stretch/shrink to occupy the full width
segmented
boolean
Join buttons as segmented group
spacing
"extraTight" | "tight" | "loose"
Determines the space between button group items

Default button group

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

Alt text

Button group with segmented buttons

Use to emphasize several buttons as a thematically-related set among other controls.

Outline button group with segmented buttons

Use to emphasize several buttons as a thematically-related set among other controls.

Alt text

Default button group

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

Alt text

Button group with segmented buttons

Use to emphasize several buttons as a thematically-related set among other controls.

Outline button group with segmented buttons

Use to emphasize several buttons as a thematically-related set among other controls.

Alt text

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 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

Button groups should follow the content guidelines for buttons.

Edit source on GitHub