Design system

Button Group

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

Button

function onClick() {
  console.log('clicked');
}

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

Properties

alignment

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

We are currently collecting contextual service examples for this component to provide as a starting point in both Figma and code libraries. To contribute examples from your service talk to the design system team.

Detailed design documentation for this component can be found on its component page in Figma.

Accessibility documentation for this component can be found on its component page in Figma.

More accessibility guidance for design and development is coming soon.

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

Playground

Properties