Button

Overview

Buttons trigger an immediate action, which can continue within the current page, a new page or modal.

When to use:

Use primary buttons for the most important action on a page (e.g. creating an object, saving changes).
Use secondary buttons for other important page actions that are not the primary task on the page.
Use subtle buttons alongside secondary or primary buttons for teritiary actions, like to cancel or visit a related task.
Use destructive buttons in confirmations for important actions that cannot be undone (like deleting something).
Use utility buttons to handle tasks that are not specifically a call to action, like opening menus, closing modals, expanding or collapsing items, etc.

Buttons are calls to action used throughout the product experience.

Edit the code below to see your changes live!

<Button actionType="normal" isLoading={false} variant="primary">
  Label
</Button>

Prop name	Type	Default	Description
`actionType`	`normal` \| `destructive`	`normal`	Indicates whether your button's action is of normal or destructive nature.
`iconLeft`	`Icon`		Pass in an Icon component to display to the left of the text.
`iconOnly`	`Icon`		Pass in an Icon component to replace content with an icon.
`iconRight`	`Icon`		Pass in an Icon component to display to the right of the text.
`isLoading`	`boolean`	`false`	Used to determine if component is in a loading state.
`mobileWidth`	`auto` \| `100%`	`100%`	Determines the width in mobile viewport.
`variant`	`primary` \| `secondary` \| `subtle` \| `utility`	`primary`	Determines which style of button to display.

Props ending with * are required

Margin Props

Do
Keep button labels short and concise.
Where there are multiple `Buttons` together, ensure the “default” action is the `primary` button.
`primary` button should only appear once per page.

Don't
Have more than one `primary` button on a page.