---
title: ButtonGroup
description: |
  ButtonGroup is used to display multiple buttons in a layout that is contextual based on the screen width or parent component. When there is more than one secondary action, they get collapsed.
      
  When used within a [Section](/docs/api/customer-account-ui-extensions/polaris-web-components/structure/section) component, the buttons will fill the width of the section.
api_version: 2025-10
api_name: customer-account-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/actions/buttongroup
  md: https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components/actions/buttongroup.md
---

# Button​Group

ButtonGroup is used to display multiple buttons in a layout that is contextual based on the screen width or parent component. When there is more than one secondary action, they get collapsed.

When used within a [Section](https://shopify.dev/docs/api/customer-account-ui-extensions/polaris-web-components/structure/section) component, the buttons will fill the width of the section.

## Properties

* accessibilityLabel

  string

  Label for the button group that describes the content of the group for screen reader users to understand what's included.

* id

  string

  A unique identifier for the element.

## Slots

* primary-action

  HTMLElement

  The primary action for the group. Accepts a single [Button](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) element.

* secondary-actions

  HTMLElement

  The secondary actions for the group. Accepts multiple [Button](https://shopify.dev/docs/api/checkout-ui-extensions/polaris-web-components/actions/button) elements.

### Examples

* #### Code

  ##### Default

  ```jsx
  <s-button-group>
    <s-button slot="primary-action" variant="primary">
      Pay now
    </s-button>
    <s-button slot="secondary-actions" variant="secondary">
      Edit order
    </s-button>
    <s-button slot="secondary-actions" variant="secondary">
      Cancel order
    </s-button>
  </s-button-group>
  ```

## Preview

![An example of the ButtonGroup component shows a primary action and multiple collapsed secondary actions.](https://shopify.dev/images/templated-apis-screenshots/customer-account-ui-extensions/2025-10/buttongroup-default.png)

## Best practices

Use these best practices to deliver a clear and accessible experience in your extensions.

### Prioritize and group related actions

Cluster actions by purpose and place the most important or common action first to set a clear default.

### Use a single primary action

Reserve the primary style for one action only. Keep all other actions secondary to reinforce hierarchy.

### Reduce clutter in secondary options

Limit the number of secondary actions and collapse extras into menus or overflow to keep the interface clean.

### Write short, scannable labels

Use verbs and nouns in sentence cases. For example, “Edit address”. Keep styling consistent across actions.

### Support accessibility and responsiveness

Provide an accessible label for the group and ensure the layout adapts well across screen sizes.