Button
Component
Carry out an important action or to navigate to another page.
Related components: Button group, Icon buttonComponent
<GoAButton onClick={onClick}>
Primary Button
</GoAButton>Properties
typeprimary | submit | secondary | tertiary | startSets the type of button. Defaults to
primary.sizenormal | compactSets the size of button. Defaults to
normal.variantnormal | destructiveStyles the button to show a destructive action. Defaults to
normal.disabledbooleanDisables the button. Defaults to
false.leadingIconGoAIconTypeShows an icon to the left of the text.
trailingIconGoAIconTypeShows an icon to the right of the text.
onClick(e: any) => voidCallback function when button is clicked.
testIdstringSets the data-testid attribute. Used with ByTestId queries in tests.
mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xlApply margin to the top, right, bottom, and/or left of the component.
Examples
Ask a user for an address
<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/town">
<GoAInput name="city" type="text" value="" onChange={onChange} width="100%"></GoAInput>
</GoAFormItem>
<GoABlock direction="row">
<GoAFormItem label="Provice/territory">
<GoADropdown onChange={onChange} name="province" value="alberta">
<GoADropdownItem label="Alberta" value="alberta"></GoADropdownItem>
<GoADropdownItem label="BC" 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="100%"></GoAInput>
</GoAFormItem>
</GoABlock>
</GoABlock>
<GoAButtonGroup alignment="start" mt="2xl">
<GoAButton type="primary" onClick={onClick}>
Submit and continue
</GoAButton>
<GoAButton type="secondary" onClick={onClick}>
Cancel
</GoAButton>
</GoAButtonGroup>Confirm a destructive action
Are you sure you want to delete this record?
You cannot undo this action.
<GoAModal heading="Are you sure you want to delete this record?">
<p>
You cannot undo this action.
</p>
<GoAButtonGroup alignment="end" mt="l">
<GoAButton type="secondary" onClick={onClick}>
Cancel
</GoAButton>
<GoAButton type="primary" variant="destructive" onClick={onClick}>
Delete record
</GoAButton>
</GoAButtonGroup>
</GoAModal>Disabled button with a required field
<GoAFormItem label="Name" requirement="required">
<GoAInput name="input" type="text" value="" 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>Coming Soon
Book time in drop in hours