Choose a version:

Button group

The button group component 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 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

Anchor to propertiesProperties

Anchor to accessibilityLabel accessibilityLabel string: Label for the button group that describes the content of the group for screen reader users to understand what's included.
Anchor to id id string: A unique identifier for the element.

Anchor to slotsSlots

Anchor to primary-action primary-action HTMLElement: The primary action for the group. Accepts a single Button element.
Anchor to secondary-actions secondary-actions HTMLElement: The secondary actions for the group. Accepts multiple Button elements.

Examples

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

Examples

Code

Default

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

Anchor to best-practicesBest 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.

Was this page helpful?