Choose a version:

ButtonGroup

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.

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.

Was this section helpful?

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.

Was this section helpful?

Code

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

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>

Preview

An example of the ButtonGroup component shows a primary action and multiple collapsed secondary actions.