Get startedFoundationsPatternsComponentsStylesContentSupportReport a bug
AllAccordionBadgeBlockButtonButton groupCalloutCheckboxChipContainerDate pickerDetailsDividerDropdownFile uploaderFooterForm itemForm stepperGridHeaderHero bannerIconsIcon buttonInputListMicrosite headerModalNotification bannerPaginationPopoverProgress indicatorRadioSide menuSkeleton loadingSpacerTableTabsText areaTooltip

Button Group

Display multiple related actions stacked or in a horizontal row to help with arrangement and spacing.

Related components: Button
ButtonButtonButton
<GoAButtonGroup alignment="center">
  <GoAButton type="primary" onClick={onClick}>
    Button
  </GoAButton>
  <GoAButton type="secondary" onClick={onClick}>
    Button
  </GoAButton>
  <GoAButton type="tertiary" onClick={onClick}>
    Button
  </GoAButton>
</GoAButtonGroup>
alignmentstart | end | center
Positions the button group in the page layout.
gaprelaxed | compact
Sets the spacing between buttons in the button group. Defaults to relaxed.
testIdstring
Sets the data-testid attribute. Used with ByTestId queries in tests.
mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsStylesSubmit an issue#design-system-supportDrop-in hoursContribute to the design systemGive feedbackRelease notes