Button group

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

Props

alignment

start | end | center

Positions the button group in the page layout.

Defaults to start.

gap

relaxed | compact

Sets the spacing between buttons in the button group.

Defaults to relaxed.

testId

string

Sets a data-testid attribute for automated testing.

mt, mr, mb, ml

none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Apply margin to the top, right, bottom, and/or left of the component.

Examples

Add a record using a drawer

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

<GoabButton leadingIcon="add" onClick={() => setOpen(true)}>
        Add Record
      </GoabButton>
      <GoabDrawer
        maxSize="492px"
        open={open}
        heading="Add Record"
        position="right"
        onClose={() => setOpen(false)}
        actions={
          <GoabButtonGroup>
            <GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
              Add record
            </GoabButton>
            <GoabButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
              Cancel
            </GoabButton>
          </GoabButtonGroup>
        }
      >
        <GoabFormItem label="Level of education">
          <GoabDropdown onChange={() => {}} name="education" value="university">
            <GoabDropdownItem value="high-school" label="High School Diploma" />
            <GoabDropdownItem value="college" label="College Diploma" />
            <GoabDropdownItem value="university" label="University Degree" />
            <GoabDropdownItem value="masters" label="Master's Degree" />
            <GoabDropdownItem value="doctorate" label="Doctorate" />
          </GoabDropdown>
        </GoabFormItem>
        <GoabFormItem label="Educational institution" mt="l">
          <GoabInput name="education" type="text" onChange={() => {}} />
        </GoabFormItem>
        <GoabFormItem label="Field of study" requirement="optional" mt="l">
          <GoabInput name="fieldOfStudy" type="text" onChange={() => {}} />
        </GoabFormItem>
        <GoabFormItem label="Is the person currently attending?" mt="l">
          <GoabRadioGroup name="attendTraining" orientation="horizontal" onChange={() => {}}>
            <GoabRadioItem value="yes" label="Yes" />
            <GoabRadioItem value="no" label="No" />
          </GoabRadioGroup>
        </GoabFormItem>
        <GoabFormItem label="Start date" mt="l">
          <GoabDatePicker onChange={() => {}} value={new Date("2022-09-01")} />
          <GoabCheckbox name="startDateApproximate" text="Approximate date" value="y" mt="s" />
        </GoabFormItem>
        <GoabFormItem label="Credential received?" mt="l">
          <GoabRadioGroup name="credentialReceived" orientation="horizontal" onChange={() => {}}>
            <GoabRadioItem value="yes" label="Yes" />
            <GoabRadioItem value="no" label="No" />
          </GoabRadioGroup>
        </GoabFormItem>
      </GoabDrawer>

open = false;

  onClick() {
    this.open = true;
  }

  onClose() {
    this.open = false;
  }

  dropdownOnChange(event: any) {
    console.log(event);
  }

  inputOnChange(event: any) {
    console.log(event);
  }

  radioOnChange(event: any) {
    console.log(event);
  }

  dateOnChange(event: any) {
    console.log(event);
  }

  closeDrawer() {
    this.open = false;
  }

<goab-button leadingIcon="add" (onClick)="onClick()">Add Record</goab-button>
<goab-drawer maxSize="492px" [open]="open" heading="Add Record" position="right" (onClose)="onClose()" [actions]="actions">
  <goab-form-item label="Level of education">
    <goab-dropdown (onChange)="dropdownOnChange($event)" name="education" value="university">
      <goab-dropdown-item value="high-school" label="High School Diploma"></goab-dropdown-item>
      <goab-dropdown-item value="college" label="College Diploma"></goab-dropdown-item>
      <goab-dropdown-item value="university" label="University Degree"></goab-dropdown-item>
      <goab-dropdown-item value="masters" label="Master's Degree"></goab-dropdown-item>
      <goab-dropdown-item value="doctorate" label="Doctorate"></goab-dropdown-item>
    </goab-dropdown>
  </goab-form-item>
  <goab-form-item label="Educational institution" mt="l">
    <goab-input name="education" type="text" (onChange)="inputOnChange($event)"></goab-input>
  </goab-form-item>
  <goab-form-item label="Field of study" requirement="optional" mt="l">
    <goab-input name="fieldOfStudy" type="text" (onChange)="inputOnChange($event)"></goab-input>
  </goab-form-item>
  <goab-form-item label="Is the person currently attending?" mt="l">
    <goab-radio-group name="attendTraining" orientation="horizontal" (onChange)="radioOnChange($event)">
      <goab-radio-item value="yes" label="Yes"></goab-radio-item>
      <goab-radio-item value="no" label="No"></goab-radio-item>
    </goab-radio-group>
  </goab-form-item>
  <goab-form-item label="Start date" mt="l">
    <goab-date-picker (onChange)="dateOnChange($event)"></goab-date-picker>
    <goab-checkbox name="startDateApproximate" text="Approximate date" value="y" mt="s"></goab-checkbox>
  </goab-form-item>
  <goab-form-item label="Credential received?" mt="l">
    <goab-radio-group name="credentialReceived" orientation="horizontal" (onChange)="radioOnChange($event)">
      <goab-radio-item value="yes" label="Yes"></goab-radio-item>
      <goab-radio-item value="no" label="No"></goab-radio-item>
    </goab-radio-group>
  </goab-form-item>
  <ng-template #actions>
    <goab-button-group>
      <goab-button type="primary" size="compact" (onClick)="closeDrawer()">Add record</goab-button>
      <goab-button type="tertiary" size="compact" (onClick)="closeDrawer()">Cancel</goab-button>
    </goab-button-group>
  </ng-template>
</goab-drawer>

const drawer = document.getElementById("record-drawer");
const openBtn = document.getElementById("open-drawer-btn");
const addBtn = document.getElementById("add-record-btn");
const cancelBtn = document.getElementById("cancel-btn");

openBtn.addEventListener("_click", () => {
  drawer.setAttribute("open", "true");
});

drawer.addEventListener("_close", () => {
  drawer.removeAttribute("open");
});

addBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

cancelBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

<goa-button version="2" id="open-drawer-btn" leadingicon="add">Add Record</goa-button>
<goa-drawer version="2" id="record-drawer" max-size="492px" heading="Add Record" position="right">
  <goa-form-item version="2" label="Level of education">
    <goa-dropdown version="2" name="education" value="university">
      <goa-dropdown-item value="high-school" label="High School Diploma"></goa-dropdown-item>
      <goa-dropdown-item value="college" label="College Diploma"></goa-dropdown-item>
      <goa-dropdown-item value="university" label="University Degree"></goa-dropdown-item>
      <goa-dropdown-item value="masters" label="Master's Degree"></goa-dropdown-item>
      <goa-dropdown-item value="doctorate" label="Doctorate"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Educational institution" mt="l">
    <goa-input version="2" name="education" type="text"></goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Field of study" requirement="optional" mt="l">
    <goa-input version="2" name="fieldOfStudy" type="text"></goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Is the person currently attending?" mt="l">
    <goa-radio-group version="2" name="attendTraining" orientation="horizontal">
      <goa-radio-item value="yes" label="Yes"></goa-radio-item>
      <goa-radio-item value="no" label="No"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>
  <goa-form-item version="2" label="Start date" mt="l">
    <goa-date-picker version="2"></goa-date-picker>
    <goa-checkbox version="2" name="startDateApproximate" text="Approximate date" value="y" mt="s"></goa-checkbox>
  </goa-form-item>
  <goa-form-item version="2" label="Credential received?" mt="l">
    <goa-radio-group version="2" name="credentialReceived" orientation="horizontal">
      <goa-radio-item value="yes" label="Yes"></goa-radio-item>
      <goa-radio-item value="no" label="No"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>
  <div slot="actions">
    <goa-button-group>
      <goa-button version="2" id="add-record-btn" type="primary" size="compact">Add record</goa-button>
      <goa-button version="2" id="cancel-btn" type="tertiary" size="compact">Cancel</goa-button>
    </goa-button-group>
  </div>
</goa-drawer>

Add and edit lots of filters

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

<GoabButton onClick={() => setOpen(true)}>Filters</GoabButton>
      <GoabDrawer
          heading="Filters"
          open={open}
          onClose={() => setOpen(false)}
          position="right"
          actions={
            <GoabButtonGroup>
              <GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
                Apply filters
              </GoabButton>
              <GoabButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
                Cancel
              </GoabButton>
            </GoabButtonGroup>
          }
        >
          <GoabFormItem label="Entry status">
            <GoabCheckboxList name="entryStatus" onChange={() => {}}>
              <GoabCheckbox name="draft" text="Draft" value="draft" />
              <GoabCheckbox name="published" text="Published" value="published" />
            </GoabCheckboxList>
          </GoabFormItem>
          <GoabFormItem label="Assigned to - Region" mt="l">
            <GoabCheckboxList name="region" onChange={() => {}}>
              <GoabCheckbox name="calgary" text="Calgary" value="calgary" />
              <GoabCheckbox name="central" text="Central" value="central" />
              <GoabCheckbox name="edmonton" text="Edmonton" value="edmonton" />
              <GoabCheckbox name="north" text="North" value="north" />
              <GoabCheckbox name="south" text="South" value="south" />
            </GoabCheckboxList>
          </GoabFormItem>
          <GoabFormItem label="Assigned to" mt="l">
            <GoabDropdown name="assignedTo" onChange={() => {}}>
              <GoabDropdownItem value="1" label="Person 1" />
              <GoabDropdownItem value="2" label="Person 2" />
            </GoabDropdown>
          </GoabFormItem>
          <GoabFormItem label="Date taken" mt="l">
            <GoabRadioGroup name="dateTaken" onChange={() => {}}>
              <GoabRadioItem value="24" label="Last 24 hours" />
              <GoabRadioItem value="72" label="Last 72 hours" />
            </GoabRadioGroup>
          </GoabFormItem>
      </GoabDrawer>

open = false;
  assignedTo = "";
  takenBy = "";

  onClick() {
    this.open = true;
  }

  onClose() {
    this.open = false;
  }

  radioOnChange(event: any) {
    console.log(event);
  }

  onChangeAssignedTo(e: any) {
    this.assignedTo = e.value as string;
  }

  closeDrawer() {
    this.open = false;
  }

<goab-button (onClick)="onClick()">Filters</goab-button>
<goab-drawer heading="Filters" [open]="open" (onClose)="onClose()" position="right" [actions]="actions">
  <goab-form-item label="Entry status">
    <goab-checkbox-list name="entryStatus" (onChange)="onCheckboxChange($event)">
      <goab-checkbox name="draft" text="Draft" value="draft"></goab-checkbox>
      <goab-checkbox name="published" text="Published" value="published"></goab-checkbox>
    </goab-checkbox-list>
  </goab-form-item>
  <goab-form-item label="Assigned to - Region" mt="l">
    <goab-checkbox-list name="region" (onChange)="onCheckboxChange($event)">
      <goab-checkbox name="calgary" text="Calgary" value="calgary"></goab-checkbox>
      <goab-checkbox name="central" text="Central" value="central"></goab-checkbox>
      <goab-checkbox name="edmonton" text="Edmonton" value="edmonton"></goab-checkbox>
      <goab-checkbox name="north" text="North" value="north"></goab-checkbox>
      <goab-checkbox name="south" text="South" value="south"></goab-checkbox>
    </goab-checkbox-list>
  </goab-form-item>
  <goab-form-item label="Assigned to" mt="l">
    <goab-dropdown [value]="assignedTo" name="assignedToData" (onChange)="onChangeAssignedTo($event)">
      <goab-dropdown-item value="1" label="Person 1"></goab-dropdown-item>
      <goab-dropdown-item value="2" label="Person 2"></goab-dropdown-item>
    </goab-dropdown>
  </goab-form-item>
  <goab-form-item label="Date taken" mt="l">
    <goab-radio-group name="dateTaken" (onChange)="radioOnChange($event)">
      <goab-radio-item value="24" label="Last 24 hours"></goab-radio-item>
      <goab-radio-item value="72" label="Last 72 hours"></goab-radio-item>
    </goab-radio-group>
  </goab-form-item>
  <ng-template #actions>
    <goab-button-group>
      <goab-button type="primary" size="compact" (onClick)="closeDrawer()">Apply filters</goab-button>
      <goab-button type="tertiary" size="compact" (onClick)="closeDrawer()">Cancel</goab-button>
    </goab-button-group>
  </ng-template>
</goab-drawer>

const drawer = document.getElementById("filters-drawer");
const openBtn = document.getElementById("open-filters-btn");
const applyBtn = document.getElementById("apply-filters-btn");
const cancelBtn = document.getElementById("cancel-btn");

openBtn.addEventListener("_click", () => {
  drawer.setAttribute("open", "true");
});

drawer.addEventListener("_close", () => {
  drawer.removeAttribute("open");
});

applyBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

cancelBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

<goa-button version="2" id="open-filters-btn">Filters</goa-button>
<goa-drawer version="2" id="filters-drawer" heading="Filters" position="right">
  <goa-form-item version="2" label="Entry status">
    <goa-checkbox-list name="entryStatus">
      <goa-checkbox version="2" name="draft" text="Draft" value="draft"></goa-checkbox>
      <goa-checkbox version="2" name="published" text="Published" value="published"></goa-checkbox>
    </goa-checkbox-list>
  </goa-form-item>
  <goa-form-item version="2" label="Assigned to - Region" mt="l">
    <goa-checkbox-list name="region">
      <goa-checkbox version="2" name="calgary" text="Calgary" value="calgary"></goa-checkbox>
      <goa-checkbox version="2" name="central" text="Central" value="central"></goa-checkbox>
      <goa-checkbox version="2" name="edmonton" text="Edmonton" value="edmonton"></goa-checkbox>
      <goa-checkbox version="2" name="north" text="North" value="north"></goa-checkbox>
      <goa-checkbox version="2" name="south" text="South" value="south"></goa-checkbox>
    </goa-checkbox-list>
  </goa-form-item>
  <goa-form-item version="2" label="Assigned to" mt="l">
    <goa-dropdown version="2" name="assignedTo">
      <goa-dropdown-item value="1" label="Person 1"></goa-dropdown-item>
      <goa-dropdown-item value="2" label="Person 2"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Date taken" mt="l">
    <goa-radio-group version="2" name="dateTaken">
      <goa-radio-item value="24" label="Last 24 hours"></goa-radio-item>
      <goa-radio-item value="72" label="Last 72 hours"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>
  <div slot="actions">
    <goa-button-group>
      <goa-button version="2" id="apply-filters-btn" type="primary" size="compact">Apply filters</goa-button>
      <goa-button version="2" id="cancel-btn" type="tertiary" size="compact">Cancel</goa-button>
    </goa-button-group>
  </div>
</goa-drawer>

const [open, setOpen] = useState(false);
  const [type, setType] = useState<string>();
  const [name, setName] = useState<string>();
  const [description, setDescription] = useState<string>();

<GoabButton type="tertiary" leadingIcon="add" onClick={() => setOpen(true)}>
        Add another item
      </GoabButton>
      <GoabModal
          heading="Add a new item"
          open={open}
          actions={
            <GoabButtonGroup alignment="end">
              <GoabButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
                Cancel
              </GoabButton>
              <GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
                Save new item
              </GoabButton>
            </GoabButtonGroup>
          }
        >
          <p>Fill in the information to create a new item</p>
          <GoabFormItem label="Type" mt="l">
            <GoabDropdown onChange={(e) => setType(e.value)} value={type}>
              <GoabDropdownItem value="1" label="Option 1" />
              <GoabDropdownItem value="2" label="Option 2" />
            </GoabDropdown>
          </GoabFormItem>
          <GoabFormItem label="Name" mt="l">
            <GoabInput
              onChange={(e) => setName(e.value)}
              value={name}
              name="name"
              width="100%"
            />
          </GoabFormItem>
          <GoabFormItem label="Description" mt="l">
            <GoabTextArea
              name="description"
              rows={3}
              width="100%"
              onChange={(e) => setDescription(e.value)}
              value={description}
            />
          </GoabFormItem>
      </GoabModal>

open = false;
  type: string | undefined = "";
  name = "";
  description = "";

  toggleModal() {
    this.open = !this.open;
  }

  updateType(event: any) {
    this.type = event.value;
  }

  updateName(event: any) {
    this.name = event.value;
  }

  updateDescription(event: any) {
    this.description = event.value;
  }

<goab-button type="tertiary" leadingIcon="add" (onClick)="toggleModal()">Add another item</goab-button>
<goab-modal [open]="open" (onClose)="toggleModal()" heading="Add a new item" [actions]="actions">
  <p>Fill in the information to create a new item</p>
  <goab-form-item label="Type" mt="l">
    <goab-dropdown (onChange)="updateType($event)" [value]="type">
      <goab-dropdown-item value="1" label="Option 1"></goab-dropdown-item>
      <goab-dropdown-item value="2" label="Option 2"></goab-dropdown-item>
    </goab-dropdown>
  </goab-form-item>
  <goab-form-item label="Name" mt="l">
    <goab-input name="name" width="100%" (onChange)="updateName($event)" [value]="name"></goab-input>
  </goab-form-item>
  <goab-form-item label="Description" mt="l">
    <goab-textarea name="description" width="100%" [rows]="3" (onChange)="updateDescription($event)" [value]="description"></goab-textarea>
  </goab-form-item>
  <ng-template #actions>
    <goab-button-group alignment="end">
      <goab-button type="tertiary" size="compact" (onClick)="toggleModal()">Cancel</goab-button>
      <goab-button type="primary" size="compact" (onClick)="toggleModal()">Save new item</goab-button>
    </goab-button-group>
  </ng-template>
</goab-modal>

const modal = document.getElementById("add-item-modal");
const openBtn = document.getElementById("open-modal-btn");
const cancelBtn = document.getElementById("cancel-btn");
const saveBtn = document.getElementById("save-btn");

openBtn.addEventListener("_click", () => {
  modal.setAttribute("open", "true");
});

modal.addEventListener("_close", () => {
  modal.removeAttribute("open");
});

cancelBtn.addEventListener("_click", () => {
  modal.removeAttribute("open");
});

saveBtn.addEventListener("_click", () => {
  modal.removeAttribute("open");
});

<goa-button version="2" id="open-modal-btn" type="tertiary" leadingicon="add">Add another item</goa-button>
<goa-modal version="2" id="add-item-modal" heading="Add a new item">
  <p>Fill in the information to create a new item</p>
  <goa-form-item version="2" label="Type" mt="l">
    <goa-dropdown version="2" id="type-dropdown">
      <goa-dropdown-item value="1" label="Option 1"></goa-dropdown-item>
      <goa-dropdown-item value="2" label="Option 2"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Name" mt="l">
    <goa-input version="2" name="name" width="100%" id="name-input"></goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Description" mt="l">
    <goa-textarea version="2" name="description" width="100%" rows="3" id="description-textarea"></goa-textarea>
  </goa-form-item>
  <div slot="actions">
    <goa-button-group alignment="end">
      <goa-button version="2" id="cancel-btn" type="tertiary" size="compact">Cancel</goa-button>
      <goa-button version="2" id="save-btn" type="primary" size="compact">Save new item</goa-button>
    </goa-button-group>
  </div>
</goa-modal>

Ask a user for an address

const [address, setAddress] = useState("");
  const [suite, setSuite] = useState("");
  const [city, setCity] = useState("");
  const [province, setProvince] = useState("");
  const [postalCode, setPostalCode] = useState("");

<GoabText size="heading-l" mt="none" mb="xl">What is your address?</GoabText>
      <GoabFormItem label="Street Address">
        <GoabInput
          name="address"
          type="text"
          value={address}
          onChange={(e) => setAddress(e.value)}
          width="100%"
        />
      </GoabFormItem>
      <GoabFormItem label="Suite or unit #" mt="l">
        <GoabInput
          name="suite"
          type="text"
          value={suite}
          onChange={(e) => setSuite(e.value)}
          width="100%"
        />
      </GoabFormItem>
      <GoabFormItem label="City or town" mt="l">
        <GoabInput
          name="city"
          type="text"
          value={city}
          onChange={(e) => setCity(e.value)}
          width="100%"
        />
      </GoabFormItem>
      <GoabBlock direction="row" gap="l" mt="l">
        <GoabFormItem label="Province or territory">
          <GoabDropdown
            onChange={(e) => setProvince(e.value ?? "")}
            name="province"
            value={province}
          >
            <GoabDropdownItem label="Alberta" value="AB" />
            <GoabDropdownItem label="British Columbia" value="BC" />
            <GoabDropdownItem label="Manitoba" value="MB" />
            <GoabDropdownItem label="New Brunswick" value="NB" />
            <GoabDropdownItem label="Newfoundland and Labrador" value="NL" />
            <GoabDropdownItem label="Northwest Territories" value="NT" />
            <GoabDropdownItem label="Nova Scotia" value="NS" />
            <GoabDropdownItem label="Nunavut" value="NU" />
            <GoabDropdownItem label="Ontario" value="ON" />
            <GoabDropdownItem label="Prince Edward Island" value="PE" />
            <GoabDropdownItem label="Quebec" value="QC" />
            <GoabDropdownItem label="Saskatchewan" value="SK" />
            <GoabDropdownItem label="Yukon" value="YT" />
          </GoabDropdown>
        </GoabFormItem>
        <GoabFormItem label="Postal Code">
          <GoabInput
            name="postalCode"
            type="text"
            value={postalCode}
            onChange={(e) => setPostalCode(e.value)}
            width="7ch"
          />
        </GoabFormItem>
      </GoabBlock>
      <GoabButtonGroup alignment="start" mt="2xl">
        <GoabButton type="primary" onClick={() => {}}>
          Save and continue
        </GoabButton>
        <GoabButton type="secondary" onClick={() => {}}>
          Cancel
        </GoabButton>
      </GoabButtonGroup>

form!: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      address: [""],
      suite: [""],
      city: [""],
      province: [""],
      postalCode: [""],
    });
  }

  onClick() {
    // Handle form submission
  }

<goab-text size="heading-l" mt="none" mb="xl">What is your address?</goab-text>
<goab-form-item label="Street Address">
  <goab-input name="address" type="text" [formControl]="form.controls.address" width="100%"></goab-input>
</goab-form-item>
<goab-form-item label="Suite or unit #" mt="l">
  <goab-input name="suite" type="text" [formControl]="form.controls.suite" width="100%"></goab-input>
</goab-form-item>
<goab-form-item label="City or town" mt="l">
  <goab-input name="city" type="text" [formControl]="form.controls.city" width="100%"></goab-input>
</goab-form-item>
<goab-block direction="row" gap="l" mt="l">
  <goab-form-item label="Province or territory">
    <goab-dropdown name="province" [formControl]="form.controls.province">
      <goab-dropdown-item label="Alberta" value="AB"></goab-dropdown-item>
      <goab-dropdown-item label="British Columbia" value="BC"></goab-dropdown-item>
      <goab-dropdown-item label="Manitoba" value="MB"></goab-dropdown-item>
      <goab-dropdown-item label="New Brunswick" value="NB"></goab-dropdown-item>
      <goab-dropdown-item label="Newfoundland and Labrador" value="NL"></goab-dropdown-item>
      <goab-dropdown-item label="Northwest Territories" value="NT"></goab-dropdown-item>
      <goab-dropdown-item label="Nova Scotia" value="NS"></goab-dropdown-item>
      <goab-dropdown-item label="Nunavut" value="NU"></goab-dropdown-item>
      <goab-dropdown-item label="Ontario" value="ON"></goab-dropdown-item>
      <goab-dropdown-item label="Prince Edward Island" value="PE"></goab-dropdown-item>
      <goab-dropdown-item label="Quebec" value="QC"></goab-dropdown-item>
      <goab-dropdown-item label="Saskatchewan" value="SK"></goab-dropdown-item>
      <goab-dropdown-item label="Yukon" value="YT"></goab-dropdown-item>
    </goab-dropdown>
  </goab-form-item>
  <goab-form-item label="Postal Code">
    <goab-input name="postalCode" type="text" [formControl]="form.controls.postalCode" width="7ch"></goab-input>
  </goab-form-item>
</goab-block>
<goab-button-group alignment="start" mt="2xl">
  <goab-button type="primary" (onClick)="onClick()">Save and continue</goab-button>
  <goab-button type="secondary" (onClick)="onClick()">Cancel</goab-button>
</goab-button-group>

document.getElementById("save-btn")?.addEventListener("_click", () => {
  console.log("Form submitted");
});

<goa-text size="heading-l" mt="none" mb="xl">What is your address?</goa-text>
<goa-form-item version="2" label="Street Address">
  <goa-input version="2" name="address" type="text" width="100%" id="address-input"></goa-input>
</goa-form-item>
<goa-form-item version="2" label="Suite or unit #" mt="l">
  <goa-input version="2" name="suite" type="text" width="100%" id="suite-input"></goa-input>
</goa-form-item>
<goa-form-item version="2" label="City or town" mt="l">
  <goa-input version="2" name="city" type="text" width="100%" id="city-input"></goa-input>
</goa-form-item>
<goa-block direction="row" gap="l" mt="l">
  <goa-form-item version="2" label="Province or territory">
    <goa-dropdown version="2" name="province" id="province-dropdown">
      <goa-dropdown-item label="Alberta" value="AB"></goa-dropdown-item>
      <goa-dropdown-item label="British Columbia" value="BC"></goa-dropdown-item>
      <goa-dropdown-item label="Manitoba" value="MB"></goa-dropdown-item>
      <goa-dropdown-item label="New Brunswick" value="NB"></goa-dropdown-item>
      <goa-dropdown-item label="Newfoundland and Labrador" value="NL"></goa-dropdown-item>
      <goa-dropdown-item label="Northwest Territories" value="NT"></goa-dropdown-item>
      <goa-dropdown-item label="Nova Scotia" value="NS"></goa-dropdown-item>
      <goa-dropdown-item label="Nunavut" value="NU"></goa-dropdown-item>
      <goa-dropdown-item label="Ontario" value="ON"></goa-dropdown-item>
      <goa-dropdown-item label="Prince Edward Island" value="PE"></goa-dropdown-item>
      <goa-dropdown-item label="Quebec" value="QC"></goa-dropdown-item>
      <goa-dropdown-item label="Saskatchewan" value="SK"></goa-dropdown-item>
      <goa-dropdown-item label="Yukon" value="YT"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Postal Code">
    <goa-input version="2" name="postalCode" type="text" width="7ch" id="postal-input"></goa-input>
  </goa-form-item>
</goa-block>
<goa-button-group alignment="start" mt="2xl">
  <goa-button version="2" type="primary" id="save-btn">Save and continue</goa-button>
  <goa-button version="2" type="secondary" id="cancel-btn">Cancel</goa-button>
</goa-button-group>

Button with Icon

<GoabButtonGroup>
      <GoabButton leadingIcon="arrow-back">Go back</GoabButton>
      <GoabButton trailingIcon="arrow-forward">Continue</GoabButton>
      <GoabButton type="secondary" leadingIcon="add">Add item</GoabButton>
    </GoabButtonGroup>

<goab-button-group>
  <goab-button leadingIcon="arrow-back">Go back</goab-button>
  <goab-button trailingIcon="arrow-forward">Continue</goab-button>
  <goab-button type="secondary" leadingIcon="add">Add item</goab-button>
</goab-button-group>

<goa-button-group>
  <goa-button version="2" leadingicon="arrow-back">Go back</goa-button>
  <goa-button version="2" trailingicon="arrow-forward">Continue</goa-button>
  <goa-button version="2" type="secondary" leadingicon="add">Add item</goa-button>
</goa-button-group>

When using icons in buttons, the button text provides the accessible name. The icon is decorative and should be hidden from screen readers with aria-hidden.

Confirm a change

const [open, setOpen] = useState(false);
  const [effectiveDate, setEffectiveDate] = useState<Date | undefined>(new Date());

  const onChangeEffectiveDate = (detail: GoabDatePickerOnChangeDetail) => {
    setEffectiveDate(detail.value as Date);
  };

<GoabButton onClick={() => setOpen(true)}>Save and continue</GoabButton>

      <GoabModal
        heading="Address has changed"
        open={open}
        onClose={() => setOpen(false)}
        actions={
          <GoabButtonGroup alignment="end">
            <GoabButton type="secondary" size="compact" onClick={() => setOpen(false)}>
              Undo address change
            </GoabButton>
            <GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
              Confirm
            </GoabButton>
          </GoabButtonGroup>
        }>
        <GoabContainer type="non-interactive" accent="filled" padding="compact" width="full">
          <GoabText as="h4" mt="none" mb="s">Before</GoabText>
          <GoabText mt="none">123456 78 Ave NW, Edmonton, Alberta</GoabText>
          <GoabText as="h4" mt="none" mb="s">After</GoabText>
          <GoabText mt="none" mb="none">881 12 Ave NW, Edmonton, Alberta</GoabText>
        </GoabContainer>
        <GoabFormItem label="Effective date" mt="l">
          <GoabDatePicker
            onChange={onChangeEffectiveDate}
            name="effectiveDate"
            value={effectiveDate}
          />
        </GoabFormItem>
      </GoabModal>

open = false;
  effectiveDate = new Date();

  toggleModal(): void {
    this.open = !this.open;
  }

  onChangeEffectiveDate(event: GoabDatePickerOnChangeDetail): void {
    this.effectiveDate = event.value as Date;
  }

<goab-button (onClick)="toggleModal()">Save and continue</goab-button>

<goab-modal [open]="open" (onClose)="toggleModal()" heading="Address has changed" [actions]="actions">
  <goab-container type="non-interactive" accent="filled" padding="compact" width="full">
    <goab-text as="h4" mt="none" mb="s">Before</goab-text>
    <goab-text mt="none">123456 78 Ave NW, Edmonton, Alberta</goab-text>
    <goab-text as="h4" mt="none" mb="s">After</goab-text>
    <goab-text mt="none" mb="none">881 12 Ave NW, Edmonton, Alberta</goab-text>
  </goab-container>
  <goab-form-item label="Effective date" mt="l">
    <goab-date-picker (onChange)="onChangeEffectiveDate($event)" name="effectiveDate" [value]="effectiveDate"></goab-date-picker>
  </goab-form-item>
  <ng-template #actions>
    <goab-button-group alignment="end">
      <goab-button type="secondary" size="compact" (onClick)="toggleModal()">
        Undo address change
      </goab-button>
      <goab-button type="primary" size="compact" (onClick)="toggleModal()">
        Confirm
      </goab-button>
    </goab-button-group>
  </ng-template>
</goab-modal>

const modal = document.getElementById('change-modal');
const openBtn = document.getElementById('open-modal-btn');
const undoBtn = document.getElementById('undo-btn');
const confirmBtn = document.getElementById('confirm-btn');
const datePicker = document.getElementById('effective-date');

let effectiveDate = new Date();
datePicker.setAttribute('value', effectiveDate.toISOString());

openBtn.addEventListener('_click', () => {
  modal.setAttribute('open', 'true');
});

undoBtn.addEventListener('_click', () => {
  modal.removeAttribute('open');
});

confirmBtn.addEventListener('_click', () => {
  modal.removeAttribute('open');
});

modal.addEventListener('_close', () => {
  modal.removeAttribute('open');
});

datePicker.addEventListener('_change', (e) => {
  effectiveDate = e.detail.value;
});

<goa-button version="2" id="open-modal-btn">Save and continue</goa-button>

<goa-modal version="2" id="change-modal" heading="Address has changed">
  <goa-container type="non-interactive" accent="filled" padding="compact" width="full">
    <goa-text as="h4" mt="none" mb="s">Before</goa-text>
    <goa-text mt="none">123456 78 Ave NW, Edmonton, Alberta</goa-text>
    <goa-text as="h4" mt="none" mb="s">After</goa-text>
    <goa-text mt="none" mb="none">881 12 Ave NW, Edmonton, Alberta</goa-text>
  </goa-container>
  <goa-form-item version="2" label="Effective date" mt="l">
    <goa-date-picker version="2" id="effective-date" name="effectiveDate"></goa-date-picker>
  </goa-form-item>
  <div slot="actions">
    <goa-button-group alignment="end">
      <goa-button version="2" type="secondary" size="compact" id="undo-btn">
        Undo address change
      </goa-button>
      <goa-button version="2" type="primary" size="compact" id="confirm-btn">
        Confirm
      </goa-button>
    </goa-button-group>
  </div>
</goa-modal>

Confirm a destructive action

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

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

open = false;

  toggleModal(): void {
    this.open = !this.open;
  }

<goab-button type="tertiary" leadingIcon="trash" (onClick)="toggleModal()">Delete record</goab-button>
<goab-modal [open]="open" (onClose)="toggleModal()" heading="Are you sure you want to delete this record?" [actions]="actions">
  <p>This action cannot be undone.</p>
  <ng-template #actions>
    <goab-button-group alignment="end">
      <goab-button type="tertiary" size="compact" (onClick)="toggleModal()">Cancel</goab-button>
      <goab-button type="primary" variant="destructive" size="compact" (onClick)="toggleModal()">Delete record</goab-button>
    </goab-button-group>
  </ng-template>
</goab-modal>

const modal = document.getElementById('delete-modal');
const deleteBtn = document.getElementById('delete-btn');
const cancelBtn = document.getElementById('cancel-btn');
const confirmDeleteBtn = document.getElementById('confirm-delete-btn');

deleteBtn.addEventListener('_click', () => {
  modal.setAttribute('open', 'true');
});

cancelBtn.addEventListener('_click', () => {
  modal.removeAttribute('open');
});

confirmDeleteBtn.addEventListener('_click', () => {
  modal.removeAttribute('open');
});

modal.addEventListener('_close', () => {
  modal.removeAttribute('open');
});

<goa-button version="2" type="tertiary" leadingicon="trash" id="delete-btn">Delete record</goa-button>
<goa-modal version="2" id="delete-modal" heading="Are you sure you want to delete this record?">
  <p>This action cannot be undone.</p>
  <div slot="actions">
    <goa-button-group alignment="end">
      <goa-button version="2" type="tertiary" size="compact" id="cancel-btn">Cancel</goa-button>
      <goa-button version="2" type="primary" variant="destructive" size="compact" id="confirm-delete-btn">Delete record</goa-button>
    </goa-button-group>
  </div>
</goa-modal>

Confirm before navigating away

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

  const handleChangeRoute = () => {
    setOpen(false);
    // In a real app, you would use your router's navigate function
    // setTimeout(() => navigate("/some-path"), 300);
    console.log("Navigating to new route...");
  };

<GoabButton onClick={() => setOpen(true)}>Open</GoabButton>
      <GoabModal
        heading="Are you sure you want to change route?"
        open={open}
        onClose={() => setOpen(false)}
        actions={
          <GoabButtonGroup alignment="end">
            <GoabButton type="secondary" size="compact" onClick={() => setOpen(false)}>
              Cancel
            </GoabButton>
            <GoabButton type="primary" size="compact" onClick={handleChangeRoute}>
              Change route
            </GoabButton>
          </GoabButtonGroup>
        }
      />

open = false;

  constructor(private router: Router) {}

  onOpen(): void {
    this.open = true;
  }

  onClose(): void {
    this.open = false;
  }

  onChangeRoute(): void {
    this.open = false;
    // setTimeout will allow any modal transitions to be run
    setTimeout(() => this.router.navigate(["/components"]), 0);
  }

<goab-button (onClick)="onOpen()">Open</goab-button>
<goab-modal [open]="open" heading="Are you sure you want to change route?" [actions]="actions">
  <ng-template #actions>
    <goab-button-group alignment="end">
      <goab-button type="secondary" size="compact" (onClick)="onClose()">Cancel</goab-button>
      <goab-button type="primary" size="compact" (onClick)="onChangeRoute()">Change route</goab-button>
    </goab-button-group>
  </ng-template>
</goab-modal>

const modal = document.getElementById('route-modal');
const openBtn = document.getElementById('open-btn');
const cancelBtn = document.getElementById('cancel-btn');
const changeRouteBtn = document.getElementById('change-route-btn');

openBtn.addEventListener('_click', () => {
  modal.setAttribute('open', 'true');
});

cancelBtn.addEventListener('_click', () => {
  modal.removeAttribute('open');
});

changeRouteBtn.addEventListener('_click', () => {
  modal.removeAttribute('open');
  // setTimeout will allow any modal transitions to be run
  setTimeout(() => {
    window.location.href = '/components';
  }, 300);
});

modal.addEventListener('_close', () => {
  modal.removeAttribute('open');
});

<goa-button version="2" id="open-btn">Open</goa-button>
<goa-modal version="2" id="route-modal" heading="Are you sure you want to change route?">
  <div slot="actions">
    <goa-button-group alignment="end">
      <goa-button version="2" type="secondary" size="compact" id="cancel-btn">Cancel</goa-button>
      <goa-button version="2" type="primary" size="compact" id="change-route-btn">Change route</goa-button>
    </goa-button-group>
  </div>
</goa-modal>

Confirm that an application was submitted

<GoabText as="h1" mt="none">You have completed the application</GoabText>

      <GoabCallout type="success" heading="Your application was successful">
        <GoabText mt="none" mb="m">You will receive a copy of the confirmation to the email person@email.com</GoabText>
        <GoabText mt="none" mb="none">Confirmation number: <strong>1234ABC</strong></GoabText>
      </GoabCallout>

      <GoabText as="h2" mt="xl" mb="m">Go back to the dashboard, or direct your user somewhere else useful.</GoabText>
      <GoabText>
        Other information about what was just completed, other tertiary information, and/or contact information.
        <br />
        Phone: <a href="tel:7801234567">780 123 4567</a>
        <br />
        Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a>
      </GoabText>

      <GoabButtonGroup alignment="start" mt="2xl">
        <GoabButton type="primary">Go to application</GoabButton>
        <GoabButton type="secondary">Back to dashboard</GoabButton>
      </GoabButtonGroup>

<goab-text as="h1" mt="none">You have completed the application</goab-text>

<goab-callout type="success" heading="Your application was successful">
  <goab-text mt="none" mb="m">You will receive a copy of the confirmation to the email person&#64;email.com</goab-text>
  <goab-text mt="none" mb="none">Confirmation number: <strong>1234ABC</strong></goab-text>
</goab-callout>

<goab-text as="h2" mt="xl" mb="m">Go back to the dashboard, or direct your user somewhere else useful.</goab-text>
<goab-text>Other information about what was just completed, other tertiary information, and/or contact information.
<br/>
Phone: <a href="tel:7801234567">780 123 4567</a>
<br/>
Email: <a href="mailto:information@gov.ab.ca">information&#64;gov.ab.ca</a>
</goab-text>

<goab-button-group alignment="start" mt="2xl">
  <goab-button type="primary">Go to application</goab-button>
  <goab-button type="secondary">Back to dashboard</goab-button>
</goab-button-group>

<goa-text as="h1" mt="none">You have completed the application</goa-text>

<goa-callout version="2" type="success" heading="Your application was successful">
  <goa-text mt="none" mb="m">You will receive a copy of the confirmation to the email person@email.com</goa-text>
  <goa-text mt="none" mb="none">Confirmation number: <strong>1234ABC</strong></goa-text>
</goa-callout>

<goa-text as="h2" mt="xl" mb="m">Go back to the dashboard, or direct your user somewhere else useful.</goa-text>
<goa-text>Other information about what was just completed, other tertiary information, and/or contact information.
<br>
Phone: <a href="tel:7801234567">780 123 4567</a>
<br>
Email: <a href="mailto:information@gov.ab.ca">information@gov.ab.ca</a>
</goa-text>

<goa-button-group alignment="start" mt="2xl">
  <goa-button version="2" type="primary">Go to application</goa-button>
  <goa-button version="2" type="secondary">Back to dashboard</goa-button>
</goa-button-group>

Disabled button with a required field

const [inputValue, setInputValue] = useState("");

  const handleInputChange = (detail: GoabInputOnChangeDetail) => {
    setInputValue(detail.value);
  };

  const handleConfirm = () => {
    // Handle form submission
    console.log("Form submitted with:", inputValue);
  };

  const handleCancel = () => {
    // Handle cancellation
    setInputValue("");
  };

<form>
      <GoabFormItem label="Name" requirement="required">
        <GoabInput
          name="input"
          type="text"
          onChange={handleInputChange}
          value={inputValue}
          width="100%"
        />
      </GoabFormItem>

      <GoabButtonGroup alignment="start" mt="xl">
        <GoabButton disabled={inputValue.trim() === ""} onClick={handleConfirm}>
          Confirm
        </GoabButton>
        <GoabButton type="secondary" onClick={handleCancel}>
          Cancel
        </GoabButton>
      </GoabButtonGroup>
    </form>

inputValue = "";

  onInputChange(detail: GoabInputOnChangeDetail): void {
    this.inputValue = detail.value;
  }

  onConfirm(): void {
    // Handle form submission
    console.log("Form submitted with:", this.inputValue);
  }

  onCancel(): void {
    // Handle cancellation
    this.inputValue = "";
  }

  get isDisabled(): boolean {
    return this.inputValue.trim() === "";
  }

<form>
  <goab-form-item label="Name" requirement="required">
    <goab-input
      name="input"
      type="text"
      (onChange)="onInputChange($event)"
      [value]="inputValue"
      width="100%">
    </goab-input>
  </goab-form-item>

  <goab-button-group alignment="start" mt="xl">
    <goab-button [disabled]="isDisabled" (onClick)="onConfirm()">
      Confirm
    </goab-button>
    <goab-button type="secondary" (onClick)="onCancel()">
      Cancel
    </goab-button>
  </goab-button-group>
</form>

const nameInput = document.getElementById('name-input');
const confirmBtn = document.getElementById('confirm-btn');
const cancelBtn = document.getElementById('cancel-btn');

nameInput.addEventListener('_change', (e) => {
  const value = e.detail.value.trim();
  if (value === '') {
    confirmBtn.setAttribute('disabled', 'true');
  } else {
    confirmBtn.removeAttribute('disabled');
  }
});

confirmBtn.addEventListener('_click', () => {
  console.log('Form submitted with:', nameInput.value);
});

cancelBtn.addEventListener('_click', () => {
  nameInput.value = '';
  confirmBtn.setAttribute('disabled', 'true');
});

<form id="required-field-form">
  <goa-form-item version="2" label="Name" requirement="required">
    <goa-input version="2" id="name-input" name="input" type="text" width="100%"></goa-input>
  </goa-form-item>

  <goa-button-group alignment="start" mt="xl">
    <goa-button version="2" id="confirm-btn" disabled="true">Confirm</goa-button>
    <goa-button version="2" id="cancel-btn" type="secondary">Cancel</goa-button>
  </goa-button-group>
</form>

Give context before asking a long answer question

const [textValue, setTextValue] = useState("");

  const handleChange = (event: GoabTextAreaOnChangeDetail) => {
    setTextValue(event.value);
  };

  const handleContinue = () => {
    console.log("Submitted:", textValue);
  };

<GoabLink leadingIcon="arrow-back" size="small" mb="none">
        Back
      </GoabLink>

      <GoabText as="h2" mt="xl" mb="m">Submit a question about your benefits</GoabText>
      <GoabText mt="none" mb="xl">
        If you need clarification about your benefit eligibility, payment schedule, or application status, submit your
        question here.
      </GoabText>

      <form>
        <GoabFormItem
          label="Provide details about your situation"
          helpText="Include specific details to help us answer your question quickly.">
          <GoabTextArea
            name="program"
            onChange={handleChange}
            value={textValue}
            maxCount={400}
            countBy="character"
          />
        </GoabFormItem>
      </form>

      <GoabDetails mt="m" heading="What kind of information is useful?">
        <p>
          Include your benefit program name, mention any recent correspondence you received and/or provide any
          relevant case or reference numbers.
        </p>
      </GoabDetails>

      <GoabButtonGroup alignment="start" mt="2xl">
        <GoabButton type="primary" onClick={handleContinue}>
          Continue
        </GoabButton>
      </GoabButtonGroup>

form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      program: [""]
    });
  }

  onContinue(): void {
    console.log("Submitted:", this.form.get("program")?.value);
  }

<goab-link leadingIcon="arrow-back" size="small" mb="none">
  Back
</goab-link>

<goab-text as="h2" mt="xl" mb="m">Submit a question about your benefits</goab-text>
<goab-text mt="none" mb="xl">
  If you need clarification about your benefit eligibility, payment schedule, or application status, submit your
  question here.
</goab-text>

<form [formGroup]="form">
  <goab-form-item
    label="Provide details about your situation"
    helpText="Include specific details to help us answer your question quickly.">
    <goab-textarea
      formControlName="program"
      name="program"
      [maxCount]="400"
      countBy="character">
    </goab-textarea>
  </goab-form-item>
</form>

<goab-details mt="m" heading="What kind of information is useful?">
  <p>
    Include your benefit program name, mention any recent correspondence you received and/or provide any
    relevant case or reference numbers.
  </p>
</goab-details>

<goab-button-group alignment="start" mt="2xl">
  <goab-button type="primary" (onClick)="onContinue()">
    Continue
  </goab-button>
</goab-button-group>

const textarea = document.getElementById('program-textarea');
const continueBtn = document.getElementById('continue-btn');

continueBtn.addEventListener('_click', () => {
  console.log('Submitted:', textarea.value);
});

<goa-link leadingicon="arrow-back" size="small" mb="none">
  Back
</goa-link>

<goa-text as="h2" mt="xl" mb="m">Submit a question about your benefits</goa-text>
<goa-text mt="none" mb="xl">
  If you need clarification about your benefit eligibility, payment schedule, or application status, submit your
  question here.
</goa-text>

<form>
  <goa-form-item version="2"
    label="Provide details about your situation"
    helptext="Include specific details to help us answer your question quickly.">
    <goa-textarea version="2"
      id="program-textarea"
      name="program"
      maxcount="400"
      countby="character">
    </goa-textarea>
  </goa-form-item>
</form>

<goa-details mt="m" heading="What kind of information is useful?">
  <p>
    Include your benefit program name, mention any recent correspondence you received and/or provide any
    relevant case or reference numbers.
  </p>
</goa-details>

<goa-button-group alignment="start" mt="2xl">
  <goa-button version="2" id="continue-btn" type="primary">
    Continue
  </goa-button>
</goa-button-group>

Question page

const [answer, setAnswer] = useState("");

  const handleContinue = () => {
    console.log("Answer submitted:", answer);
  };

<GoabLink leadingIcon="arrow-back" size="small" mb="none">
        Back
      </GoabLink>

      <GoabText as="h1" mt="xl" mb="m">What is your email address?</GoabText>
      <GoabText mt="none" mb="xl">We'll use this to send you confirmation of your application.</GoabText>

      <GoabFormItem label="Email address">
        <GoabInput
          name="email"
          type="email"
          value={answer}
          onChange={(e) => setAnswer(e.value)}
          width="100%"
        />
      </GoabFormItem>

      <GoabButtonGroup alignment="start" mt="2xl">
        <GoabButton type="primary" onClick={handleContinue}>
          Continue
        </GoabButton>
      </GoabButtonGroup>
  );
}

answer = "";

  onAnswerChange(event: { value: string }): void {
    this.answer = event.value;
  }

  handleContinue(): void {
    console.log("Answer submitted:", this.answer);
  }

<goab-link leadingIcon="arrow-back" size="small" mb="none">
  Back
</goab-link>

<goab-text as="h1" mt="xl" mb="m">What is your email address?</goab-text>
<goab-text mt="none" mb="xl">We'll use this to send you confirmation of your application.</goab-text>

<goab-form-item label="Email address">
  <goab-input
    name="email"
    type="email"
    [value]="answer"
    (onChange)="onAnswerChange($event)"
    width="100%">
  </goab-input>
</goab-form-item>

<goab-button-group alignment="start" mt="2xl">
  <goab-button type="primary" (onClick)="handleContinue()">
    Continue
  </goab-button>
</goab-button-group>

const emailInput = document.getElementById("email-input");
const continueBtn = document.getElementById("continue-btn");
let answer = "";

emailInput.addEventListener("_change", (e) => {
  answer = e.detail.value;
});

continueBtn.addEventListener("_click", () => {
  console.log("Answer submitted:", answer);
});

<goa-link leadingicon="arrow-back" size="small" mb="none">
  Back
</goa-link>

<goa-text as="h1" mt="xl" mb="m">What is your email address?</goa-text>
<goa-text mt="none" mb="xl">We'll use this to send you confirmation of your application.</goa-text>

<goa-form-item version="2" label="Email address">
  <goa-input version="2"
    id="email-input"
    name="email"
    type="email"
    width="100%">
  </goa-input>
</goa-form-item>

<goa-button-group alignment="start" mt="2xl">
  <goa-button version="2" id="continue-btn" type="primary">
    Continue
  </goa-button>
</goa-button-group>

Require user action before continuing

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

<GoabButton onClick={() => setOpen(true)}>Open Basic Modal</GoabButton>
      <GoabModal
        heading="Are you sure you want to continue?"
        open={open}
        onClose={() => setOpen(false)}
        actions={
          <GoabButtonGroup alignment="end">
            <GoabButton type="secondary" size="compact" onClick={() => setOpen(false)}>
              Back
            </GoabButton>
            <GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
              Continue
            </GoabButton>
          </GoabButtonGroup>
        }
      >
        <p>You cannot return to this page.</p>
      </GoabModal>

open = false;

  toggleModal(): void {
    this.open = !this.open;
  }

<goab-button (onClick)="toggleModal()">Open Basic Modal</goab-button>
<goab-modal
  [open]="open"
  (onClose)="toggleModal()"
  heading="Are you sure you want to continue?"
  [actions]="actions">
  <p>You cannot return to this page.</p>
  <ng-template #actions>
    <goab-button-group alignment="end">
      <goab-button type="secondary" size="compact" (onClick)="toggleModal()">Back</goab-button>
      <goab-button type="primary" size="compact" (onClick)="toggleModal()">Continue</goab-button>
    </goab-button-group>
  </ng-template>
</goab-modal>

const modal = document.getElementById("confirmation-modal");
const openBtn = document.getElementById("open-modal-btn");
const backBtn = document.getElementById("back-btn");
const continueBtn = document.getElementById("continue-btn");

function openModal() {
  modal.setAttribute("open", "true");
}

function closeModal() {
  modal.removeAttribute("open");
}

openBtn.addEventListener("_click", openModal);
backBtn.addEventListener("_click", closeModal);
continueBtn.addEventListener("_click", closeModal);
modal.addEventListener("_close", closeModal);

<goa-button version="2" id="open-modal-btn">Open Basic Modal</goa-button>
<goa-modal version="2" id="confirmation-modal" heading="Are you sure you want to continue?">
  <p>You cannot return to this page.</p>
  <div slot="actions">
    <goa-button-group alignment="end">
      <goa-button version="2" id="back-btn" type="secondary" size="compact">Back</goa-button>
      <goa-button version="2" id="continue-btn" type="primary" size="compact">Continue</goa-button>
    </goa-button-group>
  </div>
</goa-modal>

Reset date picker field

const [date, setDate] = useState<Date | undefined>();

  const setNewDate = (value: Date | undefined) => {
    setDate(value);
  };

  function setValue() {
    const d = new Date();
    d.setDate(d.getDate() - 7);
    setDate(d);
  }

  function clearValue() {
    setDate(undefined);
  }

<GoabFormItem label="Date Picker">
        <GoabDatePicker
          name="item"
          value={date}
          onChange={(e) => setNewDate(e.value as Date)}
          mb="xl"
        />
      </GoabFormItem>

      <GoabButtonGroup mt="xs" alignment="start">
        <GoabButton onClick={setValue}>
          Set Value
        </GoabButton>
        <GoabButton onClick={clearValue}>Clear Value</GoabButton>
      </GoabButtonGroup>

item: Date | undefined = undefined;

  onChange(event: { value: Date | undefined }): void {
    this.item = event.value;
  }

  setValue(): void {
    const d = new Date();
    d.setDate(d.getDate() - 7);
    this.item = d;
  }

  clearValue(): void {
    this.item = undefined;
  }

<goab-form-item label="Date Picker">
  <goab-date-picker
    (onChange)="onChange($event)"
    name="item"
    [value]="item">
  </goab-date-picker>
</goab-form-item>

<goab-button-group alignment="start" mt="xs">
  <goab-button (onClick)="setValue()">Set Value</goab-button>
  <goab-button (onClick)="clearValue()">Clear Value</goab-button>
</goab-button-group>

const datePicker = document.getElementById("date-picker");
const setValueBtn = document.getElementById("set-value-btn");
const clearValueBtn = document.getElementById("clear-value-btn");

datePicker.addEventListener("_change", (e) => {
  console.log("Date changed:", e.detail.value);
});

setValueBtn.addEventListener("_click", () => {
  const d = new Date();
  d.setDate(d.getDate() - 7);
  datePicker.setAttribute("value", d.toISOString());
});

clearValueBtn.addEventListener("_click", () => {
  datePicker.removeAttribute("value");
});

<goa-form-item version="2" label="Date Picker">
  <goa-date-picker version="2" id="date-picker" name="item"></goa-date-picker>
</goa-form-item>

<goa-button-group alignment="start" mt="xs">
  <goa-button version="2" id="set-value-btn">Set Value</goa-button>
  <goa-button version="2" id="clear-value-btn">Clear Value</goa-button>
</goa-button-group>

Review page

<GoabText size="heading-l" mt="none" mb="none">Review your answers</GoabText>
      <GoabText size="heading-s" color="secondary" mt="l" mb="none">Your situation</GoabText>
      <GoabTable mt="l">
        <tbody>
          <tr>
            <td>
              <strong>What was your (the applicant's) relationship to the deceased?</strong>
            </td>
            <td>Other</td>
            <td>
              <GoabLink>Change</GoabLink>
            </td>
          </tr>
          <tr>
            <td>
              <strong>My relationship to the deceased was</strong>
            </td>
            <td>Manager</td>
            <td>
              <GoabLink>Change</GoabLink>
            </td>
          </tr>
          <tr>
            <td>
              <strong>
                Was the deceased part of a household that was receiving Assured Income for the
                Severely Handicapped (AISH) or Income Support?
              </strong>
            </td>
            <td>No</td>
            <td>
              <GoabLink>Change</GoabLink>
            </td>
          </tr>
          <tr>
            <td>
              <strong>Was the deceased a minor?</strong>
            </td>
            <td>No</td>
            <td>
              <GoabLink>Change</GoabLink>
            </td>
          </tr>
          <tr>
            <td>
              <strong>What was the deceased's marital status at time of death?</strong>
            </td>
            <td>Married</td>
            <td>
              <GoabLink>Change</GoabLink>
            </td>
          </tr>
          <tr>
            <td>
              <strong>Did the deceased have any dependents?</strong>
            </td>
            <td>No</td>
            <td>
              <GoabLink>Change</GoabLink>
            </td>
          </tr>
          <tr>
            <td>
              <strong>Was the deceased a sponsored immigrant?</strong>
            </td>
            <td>Yes</td>
            <td>
              <GoabLink>Change</GoabLink>
            </td>
          </tr>
        </tbody>
      </GoabTable>
      <GoabButtonGroup alignment="start" mt="2xl">
        <GoabButton type="primary">Confirm and continue</GoabButton>
        <GoabButton type="tertiary">Back to application overview</GoabButton>
      </GoabButtonGroup>
  );
}

onChangeClick(): void {
    console.log("Change clicked");
  }

  onConfirmClick(): void {
    console.log("Confirm clicked");
  }

  onBackClick(): void {
    console.log("Back clicked");
  }

<goab-text size="heading-l" mt="none" mb="none">Review your answers</goab-text>
<goab-text size="heading-s" color="secondary" mt="l" mb="none">Your situation</goab-text>
<goab-table mt="l">
  <tbody>
    <tr>
      <td><strong>What was your (the applicant's) relationship to the deceased?</strong></td>
      <td>Other</td>
      <td><goab-link>Change</goab-link></td>
    </tr>
    <tr>
      <td><strong>My relationship to the deceased was</strong></td>
      <td>Manager</td>
      <td><goab-link>Change</goab-link></td>
    </tr>
    <tr>
      <td><strong>Was the deceased part of a household that was receiving Assured Income for the Severely Handicapped (AISH) or Income Support?</strong></td>
      <td>No</td>
      <td><goab-link>Change</goab-link></td>
    </tr>
    <tr>
      <td><strong>Was the deceased a minor?</strong></td>
      <td>No</td>
      <td><goab-link>Change</goab-link></td>
    </tr>
    <tr>
      <td><strong>What was the deceased's marital status at time of death?</strong></td>
      <td>Married</td>
      <td><goab-link>Change</goab-link></td>
    </tr>
    <tr>
      <td><strong>Did the deceased have any dependents?</strong></td>
      <td>No</td>
      <td><goab-link>Change</goab-link></td>
    </tr>
    <tr>
      <td><strong>Was the deceased a sponsored immigrant?</strong></td>
      <td>Yes</td>
      <td><goab-link>Change</goab-link></td>
    </tr>
  </tbody>
</goab-table>
<goab-button-group alignment="start" mt="2xl">
  <goab-button type="primary" (onClick)="onConfirmClick()">Confirm and continue</goab-button>
  <goab-button type="tertiary" (onClick)="onBackClick()">Back to application overview</goab-button>
</goab-button-group>

document.getElementById("confirm-btn").addEventListener("_click", () => {
  console.log("Confirm clicked");
});

<goa-text size="heading-l" mt="none" mb="none">Review your answers</goa-text>
<goa-text size="heading-s" color="secondary" mt="l" mb="none">Your situation</goa-text>
<goa-table version="2" mt="l">
  <table>
    <tbody>
    <tr>
      <td><strong>What was your (the applicant's) relationship to the deceased?</strong></td>
      <td>Other</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    <tr>
      <td><strong>My relationship to the deceased was</strong></td>
      <td>Manager</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    <tr>
      <td><strong>Was the deceased part of a household that was receiving Assured Income for the Severely Handicapped (AISH) or Income Support?</strong></td>
      <td>No</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    <tr>
      <td><strong>Was the deceased a minor?</strong></td>
      <td>No</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    <tr>
      <td><strong>What was the deceased's marital status at time of death?</strong></td>
      <td>Married</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    <tr>
      <td><strong>Did the deceased have any dependents?</strong></td>
      <td>No</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    <tr>
      <td><strong>Was the deceased a sponsored immigrant?</strong></td>
      <td>Yes</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    </tbody>
  </table>
</goa-table>
<goa-button-group alignment="start" mt="2xl">
  <goa-button version="2" type="primary" id="confirm-btn">Confirm and continue</goa-button>
  <goa-button version="2" type="tertiary" id="back-btn">Back to application overview</goa-button>
</goa-button-group>

Show a label on an icon only button

<GoabButtonGroup alignment="start">
      <GoabTooltip content="Edit">
        <GoabIconButton icon="pencil" ariaLabel="Edit" />
      </GoabTooltip>
      <GoabTooltip content="Alerts">
        <GoabIconButton icon="notifications" ariaLabel="Alerts" />
      </GoabTooltip>
      <GoabTooltip content="Settings">
        <GoabIconButton icon="settings" ariaLabel="Settings" />
      </GoabTooltip>
    </GoabButtonGroup>

<goab-button-group alignment="start">
  <goab-tooltip content="Edit">
    <goab-icon-button icon="pencil" ariaLabel="Edit"></goab-icon-button>
  </goab-tooltip>
  <goab-tooltip content="Alerts">
    <goab-icon-button icon="notifications" ariaLabel="Alerts"></goab-icon-button>
  </goab-tooltip>
  <goab-tooltip content="Settings">
    <goab-icon-button icon="settings" ariaLabel="Settings"></goab-icon-button>
  </goab-tooltip>
</goab-button-group>

<goa-button-group alignment="start">
  <goa-tooltip content="Edit">
    <goa-icon-button icon="pencil" aria-label="Edit"></goa-icon-button>
  </goa-tooltip>
  <goa-tooltip content="Alerts">
    <goa-icon-button icon="notifications" aria-label="Alerts"></goa-icon-button>
  </goa-tooltip>
  <goa-tooltip content="Settings">
    <goa-icon-button icon="settings" aria-label="Settings"></goa-icon-button>
  </goa-tooltip>
</goa-button-group>

Warn a user of a deadline

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

<GoabButton type="secondary" onClick={() => setOpen(true)}>
        Save for later
      </GoabButton>
      <GoabModal
        heading="Complete submission prior to 1PM"
        calloutVariant="important"
        open={open}
        onClose={() => setOpen(false)}
        actions={
          <GoabButtonGroup alignment="end">
            <GoabButton type="primary" onClick={() => setOpen(false)}>
              I understand
            </GoabButton>
          </GoabButtonGroup>
        }
      >
        <p>
          You've selected to adjourn a matter that is required to appear today. This Calgary court
          location does not accept adjournment requests past 1PM MST. Please submit your
          adjournment request as soon as possible.
        </p>
      </GoabModal>
  );
}

open = false;

  toggleModal(): void {
    this.open = !this.open;
  }

<goab-button type="secondary" (onClick)="toggleModal()">Save for later</goab-button>
<goab-modal
  [open]="open"
  calloutVariant="important"
  (onClose)="toggleModal()"
  heading="Complete submission prior to 1PM"
  [actions]="actions">
  <p>
    You've selected to adjourn a matter that is required to appear today. This Calgary court
    location does not accept adjournment requests past 1PM MST. Please submit your adjournment
    request as soon as possible.
  </p>
  <ng-template #actions>
    <goab-button-group alignment="end">
      <goab-button type="primary" (onClick)="toggleModal()">I understand</goab-button>
    </goab-button-group>
  </ng-template>
</goab-modal>

const modal = document.getElementById("deadline-modal");
const openBtn = document.getElementById("open-modal-btn");
const understandBtn = document.getElementById("understand-btn");

openBtn.addEventListener("_click", () => {
  modal.setAttribute("open", "true");
});

understandBtn.addEventListener("_click", () => {
  modal.removeAttribute("open");
});

modal.addEventListener("_close", () => {
  modal.removeAttribute("open");
});

<goa-button version="2" type="secondary" id="open-modal-btn">Save for later</goa-button>
<goa-modal version="2"
  id="deadline-modal"
  calloutvariant="important"
  heading="Complete submission prior to 1PM">
  You've selected to adjourn a matter that is required to appear today. This Calgary court
  location does not accept adjournment requests past 1PM MST. Please submit your adjournment
  request as soon as possible.
  <div slot="actions">
    <goa-button-group alignment="end">
      <goa-button version="2" type="primary" size="compact" id="understand-btn">I understand</goa-button>
    </goa-button-group>
  </div>
</goa-modal>

Sizing

Save

Cancel

Don't

Don't use different button sizes in the same area to emphasize hierarchy.

Cancel

Save

Don't

Don't stack standard and full width buttons.

Save

Cancel

Use full width buttons on mobile.

Positioning

Submit

Edit

Save

Copy

Draft

Don't

Don't group more than 3 actions together. Consider using an overflow menu for additional options.

Submit

Cancel

Use a button group when putting multiple buttons together.

Types

Button types

Primary - If there is only one button on a page, it should be a primary button. For citizen facing applications, generally there should only be one primary button on a page.
Secondary - Use secondary buttons for less important actions on a page. Often paired with a primary action as a secondary action.
Tertiary - Use tertiary buttons for links that should function like a button, such as “edit” or “cancel” in applications. It’s okay to use more than one tertiary button on a page.

Save

Cancel

Use a primary button for main actions and a secondary button for less important actions.

All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

No accessibility-specific guidelines have been documented for this component yet.

View old component docs

Props

Add a record using a drawer

Add and edit lots of filters

Add another item in a modal

Ask a user for an address

Button with Icon

Confirm a change

Confirm a destructive action

Confirm before navigating away

Confirm that an application was submitted

Disabled button with a required field

Give context before asking a long answer question

Question page

Require user action before continuing

Reset date picker field

Review page

Show a label on an icon only button

Warn a user of a deadline

Sizing

Positioning

Types