---
title: Button group
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/web-components/structure/section)
  component, the buttons will fill the width of the section.
api_version: 2026-01
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/actions/button-group
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/actions/button-group.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/web-components/structure/section) component, the buttons will fill the width of the section.

### Support Targets (24)

### Supported targets

* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## 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/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/web-components/actions/button) elements.

Examples

## Preview

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

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

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