Button

Buttons allow users to perform an action.

Variant

The Button comes with three main visual styles: primary, secondary (default), and tertiary.

Primary

Use the primary Button for the main action in a page.

<>
  <Button variant="primaryBrand" text="PrimaryBrand" />
  <Button variant="primaryInfo" text="PrimaryInfo" />
  <Button variant="primarySuccess" text="PrimarySuccess" />
  <Button variant="primaryWarning" text="PrimaryWarning" />
  <Button variant="primaryAlert" text="PrimaryAlert" />
</>

Secondary

Use the secondary Button by default.

<>
  <Button variant="secondaryNeutral" text="SecondaryNeutral" />
  <Button variant="secondaryInfo" text="SecondaryInfo" />
  <Button variant="secondarySuccess" text="SecondarySuccess" />
  <Button variant="secondaryWarning" text="SecondaryWarning" />
  <Button variant="secondaryAlert" text="SecondaryAlert" />
</>

Tertiary

Use the tertiary Button to display an optional action or an event trigger.

<>
  <Button variant="tertiaryBrand" text="TertiaryBrand" />
  <Button variant="tertiaryNeutral" text="TertiaryNeutral" />
  <Button variant="tertiaryInfo" text="TertiaryInfo" />
  <Button variant="tertiarySuccess" text="TertiarySuccess" />
  <Button variant="tertiaryWarning" text="TertiaryWarning" />
  <Button variant="tertiaryAlert" text="TertiaryAlert" />
</>

Size

Use the fit props to control the size of the Button.

<>
  <Button fit="content" text="Content fit" />
  <Button fit="parent" text="Parent fit" />
</>

With icons

You can attach an Icon to the Button using iconName prop.

Use the iconPosition prop to set the position of the button, either left (default) or right

<>
  <Button iconName="chevron-left" text="Go back" />
  <Button iconName="chevron-right" iconPosition="right" text="Continue" />
</>

Loading state

There are two ways to set the Button's state as loading:

The isLoading prop
The asynchronous onClick function

<>
  <Button isLoading {...otherProps} />
  <Button
    onClick={async (event) => {
      await submitForm(event);
    }}
    {...otherProps}
  />
</>