Button Group

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

Related components: Button

Code examples

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>

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.

Design guidelines

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

Button Group

Component

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

Component

Properties