Button group

implementation
swc
component
button-group

Anatomy

https://main--spectrum-hub--adobe.aem.page/fragments/components/button-group/anatomy

Component options

https://main--spectrum-hub--adobe.aem.page/fragments/components/button-group/option-details

States

https://main--spectrum-hub--adobe.aem.page/fragments/components/button-group/states

Behaviors

https://main--spectrum-hub--adobe.aem.page/fragments/components/button-group/behaviors

Usage guidelines

The most critical action within a button group should be an accent, primary, or negative button (fill or outline). The other actions should always be a secondary outline button.

Align button groups based on content

Button groups are aligned contextually. In general, button groups are left-aligned to follow content such as a block of text. They are center-aligned in the context of an empty state. And, they should be right-aligned inside container components such as dialogs, popovers, or cards.

Respect button order within a group

The order of button priority should match the alignment of surrounding text. When text is left-aligned, buttons should be arranged so that the leftmost button is the most critical. When text is right- or center- aligned, the most critical action should be the furthest right.

Use icons only for the most critical actions

Not all buttons in a group require an icon, but buttons with icons should always be of a higher priority than ones without icons. If the most critical action in a group doesn't have an icon, don't use icons in the remaining lower-level actions.

Use a button group to show additional actions

Instead of a single split button (now a deprecated component), use a button group to show any additional actions related to the most critical action.

Internationalization

https://main--spectrum-hub--adobe.aem.page/fragments/components/button-group/internationalization

Accessibility

https://main--spectrum-hub--adobe.aem.page/fragments/components/button-group/accessibility