Button group
The button group component displays multiple related buttons in a structured layout. Use button group to organize action buttons together, creating clear visual hierarchies and helping users understand available options.
Button groups support various layouts including segmented appearances for tightly related options like view switching or filter controls. For individual actions, use button.
Supported targets
- admin.
abandoned-checkout-details. action. render - admin.
abandoned-checkout-details. block. render - admin.
catalog-details. action. render - admin.
catalog-details. block. render - admin.
collection-details. action. render - admin.
collection-details. block. render - admin.
collection-index. action. render - admin.
company-details. action. render - admin.
company-details. block. render - admin.
company-location-details. block. render - admin.
customer-details. action. render - admin.
customer-details. block. render - admin.
customer-index. action. render - admin.
customer-index. selection-action. render - admin.
customer-segment-details. action. render - admin.
discount-details. action. render - admin.
discount-details. function-settings. render - admin.
discount-index. action. render - admin.
discount-index. selection-action. render - admin.
draft-order-details. action. render - admin.
draft-order-details. block. render - admin.
draft-order-index. action. render - admin.
draft-order-index. selection-action. render - admin.
gift-card-details. action. render - admin.
gift-card-details. block. render - admin.
order-details. action. render - admin.
order-details. block. render - admin.
order-details. print-action. render - admin.
order-fulfilled-card. action. render - admin.
order-index. action. render - admin.
order-index. selection-action. render - admin.
order-index. selection-print-action. render - admin.
product-details. action. render - admin.
product-details. block. render - admin.
product-details. configuration. render - admin.
product-details. print-action. render - admin.
product-details. reorder. render - admin.
product-index. action. render - admin.
product-index. selection-action. render - admin.
product-index. selection-print-action. render - admin.
product-purchase-option. action. render - admin.
product-variant-details. action. render - admin.
product-variant-details. block. render - admin.
product-variant-details. configuration. render - admin.
product-variant-purchase-option. action. render - admin.
settings. order-routing-rule. render - admin.
settings. validation. render
Supported targets
- admin.
abandoned-checkout-details. action. render - admin.
abandoned-checkout-details. block. render - admin.
catalog-details. action. render - admin.
catalog-details. block. render - admin.
collection-details. action. render - admin.
collection-details. block. render - admin.
collection-index. action. render - admin.
company-details. action. render - admin.
company-details. block. render - admin.
company-location-details. block. render - admin.
customer-details. action. render - admin.
customer-details. block. render - admin.
customer-index. action. render - admin.
customer-index. selection-action. render - admin.
customer-segment-details. action. render - admin.
discount-details. action. render - admin.
discount-details. function-settings. render - admin.
discount-index. action. render - admin.
discount-index. selection-action. render - admin.
draft-order-details. action. render - admin.
draft-order-details. block. render - admin.
draft-order-index. action. render - admin.
draft-order-index. selection-action. render - admin.
gift-card-details. action. render - admin.
gift-card-details. block. render - admin.
order-details. action. render - admin.
order-details. block. render - admin.
order-details. print-action. render - admin.
order-fulfilled-card. action. render - admin.
order-index. action. render - admin.
order-index. selection-action. render - admin.
order-index. selection-print-action. render - admin.
product-details. action. render - admin.
product-details. block. render - admin.
product-details. configuration. render - admin.
product-details. print-action. render - admin.
product-details. reorder. render - admin.
product-index. action. render - admin.
product-index. selection-action. render - admin.
product-index. selection-print-action. render - admin.
product-purchase-option. action. render - admin.
product-variant-details. action. render - admin.
product-variant-details. block. render - admin.
product-variant-details. configuration. render - admin.
product-variant-purchase-option. action. render - admin.
settings. order-routing-rule. render - admin.
settings. validation. render
Anchor to PropertiesProperties
Configure the following properties on the button group component.
- "base" | "none""base" | "none"Default: 'base'Default: 'base'requiredrequired
The spacing between buttons in the group.
base: Standard spacing that provides clear visual separation between buttons.none: No spacing, creating a connected button group.
- stringstringrequiredrequired
A label that describes the purpose or content of the component for assistive technologies like screen readers. Use this to provide additional context when the visible content alone doesn't clearly convey the component's purpose.
Anchor to SlotsSlots
The button group component supports slots for additional content placement within the component. Learn more about using slots.
- HTMLElementHTMLElement
The buttons displayed within the button group component, which are arranged together as a cohesive set of related actions.
- HTMLElementHTMLElement
The main action for this group, displayed with high visual emphasis. Accepts a single button with
variant="primary".Use this for the primary action you want users to take. This can't be used when
gap="none".- HTMLElementHTMLElement
Supporting actions displayed with less emphasis than the primary action. Accepts one or more button components with
variant="secondary"orvariant="auto".Use these for alternative or less critical actions.
Anchor to ExamplesExamples
Anchor to Group a primary and secondary actionGroup a primary and secondary action
Group related buttons together with a primary action and secondary options. This example shows a button group with a save button and a cancel button.
Preview
html
Present multiple secondary actions for operating on selected items. This example shows archive, export, and delete buttons grouped together for bulk operations.
Preview
html
Add icons to grouped buttons to help merchants identify each action. This example shows duplicate, archive, and delete buttons with icons.
Preview
html
Remove the gap between buttons to create a segmented control for toggling between views or options. This example shows day, week, and month buttons joined together with no spacing.
Preview
html
Anchor to Confirm a destructive actionConfirm a destructive action
Pair a cancel button with a critical action for destructive confirmation flows. This example shows a cancel and delete button grouped together for a confirmation dialog.
Preview
html
Anchor to Best practicesBest practices
- Group related actions: Organize related calls to action together to create clear action hierarchies and help merchants understand available options.
- Maintain visual hierarchy: Use primary variants for main actions and secondary or tertiary variants for supporting actions to guide merchant attention.
- Limit action count: Avoid including too many buttons, which can overwhelm merchants and create decision paralysis.
- Use segmented appearance for toggles: Apply the segmented appearance for tightly related options like view switching or filter controls.
- Separate destructive actions: Position destructive actions appropriately and use critical tone to prevent accidental activation.