Skip to contentShopify logoPolaris

Button group

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

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

import {ButtonGroup, Button} from '@shopify/polaris';
import React from 'react';

function ButtonGroupExample() {
  return (
    <ButtonGroup>
      <Button>Cancel</Button>
      <Button primary>Save</Button>
    </ButtonGroup>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface ButtonGroupProps
spacing?'extraTight' | 'tight' | 'loose'

Determines the space between button group items.

segmented?boolean

Join buttons as segmented group.

fullWidth?boolean

Buttons will stretch/shrink to occupy the full width.

connectedTop?boolean

Remove top left and right border radius.

children?React.ReactNode

Button components.

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.