Design system

Button

Carry out an important action or to navigate to another page.

Code playground

Primary Button

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

<GoAButton onClick={onClick}>
  Primary Button
</GoAButton>

Properties

typeprimary | submit | secondary | tertiary | start

Sets the type of button.
Defaults to primary.

sizenormal | compact

Sets the size of button.
Defaults to normal.

variantnormal | destructive

Styles the button to show a destructive action.
Defaults to normal.

disabledboolean

Disables the button.
Defaults to false.

leadingIconGoAIconType

Shows an icon to the left of the text.

trailingIconGoAIconType

Shows an icon to the right of the text.

widthstring

Sets the width of the button.

onClick(e: any) => void

Callback function when button is clicked.

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.

Examples

What is your address?

Save and continue

Cancel

<GoAText size="heading-l" mb="xl">
  What is your address?
</GoAText>
<GoABlock gap="xl" direction="column">
  <GoAFormItem label="Street Address">
    <GoAInput name="address" type="text" value="" onChange={onChange} width="100%"></GoAInput>
  </GoAFormItem>
  <GoAFormItem label="Suite or unit #">
    <GoAInput name="suite" type="text" value="" onChange={onChange} width="100%"></GoAInput>
  </GoAFormItem>
  <GoAFormItem label="City or town">
    <GoAInput name="city" type="text" value="" onChange={onChange} width="100%"></GoAInput>
  </GoAFormItem>
  <GoABlock direction="row" gap="xl">
    <GoAFormItem label="Provice or territory">
      <GoADropdown onChange={onChange} name="province" value="alberta">
        <GoADropdownItem label="Alberta" value="alberta"></GoADropdownItem>
        <GoADropdownItem label="British Columbia" value="bc"></GoADropdownItem>
        <GoADropdownItem label="Manitoba" value="manitoba"></GoADropdownItem>
        <GoADropdownItem label="New Brunswick" value="new-brunswick"></GoADropdownItem>
        <GoADropdownItem label="Newfoundland and Labrador" value="newfoundland"></GoADropdownItem>
        <GoADropdownItem label="Nova Scotia" value="nova-scotia"></GoADropdownItem>
        <GoADropdownItem label="Ontario" value="ontario"></GoADropdownItem>
        <GoADropdownItem label="Prince Edward Island" value="prince-edward-island"></GoADropdownItem>
        <GoADropdownItem label="Quebec" value="quebec"></GoADropdownItem>
        <GoADropdownItem label="Saskatchewan" value="saskatchewan"></GoADropdownItem>
      </GoADropdown>
    </GoAFormItem>
    <GoAFormItem label="Postal Code">
      <GoAInput name="postalCode" type="text" value="" onChange={onChange} width="7ch"></GoAInput>
    </GoAFormItem>
  </GoABlock>
</GoABlock>
<GoAButtonGroup alignment="start" mt="2xl">
  <GoAButton type="primary" onClick={onClick}>
    Save and continue
  </GoAButton>
  <GoAButton type="secondary" onClick={onClick}>
    Cancel
  </GoAButton>
</GoAButtonGroup>

Delete record

const [open, setOpen] = useState(false);

<GoAButton type="tertiary" leadingIcon="trash" onClick={() => setOpen(true)}>Delete record</GoAButton>
<GoAModal
  heading="Are you sure you want to delete this record?"
  open={open}
  role="alertdialog"
  onClose={() => setOpen(false)}
  actions={
    <GoAButtonGroup alignment="end">
      <GoAButton type="tertiary" onClick={() => setOpen(false)}>
        Cancel
      </GoAButton>
      <GoAButton type="primary" variant="destructive" onClick={() => setOpen(false)}>
         Delete record
      </GoAButton>
    </GoAButtonGroup>
  }
>
  <p>This action cannot be undone.</p>
</GoAModal>

function onClick() {
 // do nothing.
}
onChange(name: string, value: string) {}

<form>
  <GoAFormItem label="Name" requirement="required">
    <GoAInput name="input" type="text" onChange={onChange} width="100%"></GoAInput>
  </GoAFormItem>
  <GoAButtonGroup alignment="start" mt="l">
    <GoAButton disabled={true} onClick={onClick}>
      Confirm
    </GoAButton>
    <GoAButton type="secondary" onClick={onClick}>
      Cancel
    </GoAButton>
  </GoAButtonGroup>
</form>

Design

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

Accessibility

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

Ask a user for an address

Confirm a destructive action

Disabled button with a required field