Buttons

Buttons are calls to action used throughout the product experience. Buttons Design Guidelines.

Edit the code below to see your changes live!

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

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

API

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`	`primary`	Determines which style of button to display.

Props ending with * are required

Inherited Props

Margin Props

Variants

There are three types of variants to choose from: primary, secondary, and subtle. You can determine what type of variant by using the variant prop.

Edit the code below to see your changes live!

<>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="subtle">Subtle</Button>
</>

<>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="subtle">Subtle</Button>
</>

Action Types

There are two action types: normal & destructive. They are used to indicate the nature of the action when clicking on the button.

Edit the code below to see your changes live!

<>
  <Button actionType="normal">Normal</Button>
  <Button actionType="destructive">Destructive</Button>
</>

<>
  <Button actionType="normal">Normal</Button>
  <Button actionType="destructive">Destructive</Button>
</>

States

Loading

The loading state is used when clicking a button will perform a asyncronous action.

Edit the code below to see your changes live!

function LoadingButton() {
  const [isLoading, setLoading] = useState(false);

  function simulateNetworkRequest() {
    return new Promise((resolve) => setTimeout(resolve, 2000));
  }

  useEffect(() => {
    if (isLoading) {
      simulateNetworkRequest().then(() => {
        setLoading(false);
      });
    }
  }, [isLoading]);

  const handleClick = () => setLoading(true);

  return (
    <Button variant="primary" isLoading={isLoading} onClick={!isLoading ? handleClick : () => null}>
      Click to load
    </Button>
  );
}

function LoadingButton() {
  const [isLoading, setLoading] = useState(false);
  function simulateNetworkRequest() {
    return new Promise((resolve) => setTimeout(resolve, 2000));
  }
  useEffect(() => {
    if (isLoading) {
      simulateNetworkRequest().then(() => {
        setLoading(false);
      });
    }
  }, [isLoading]);
  const handleClick = () => setLoading(true);
  return (
    <Button variant="primary" isLoading={isLoading} onClick={!isLoading ? handleClick : () => null}>
      Click to load
    </Button>
  );
}

Disabled

A disabled state is used to indicate no action can be done using the button by passing a disabled prop.

Edit the code below to see your changes live!

<>
  <Button disabled>Disabled</Button>
  <Button disabled variant="secondary">
    Disabled
  </Button>
  <Button disabled variant="subtle">
    Disabled
  </Button>
</>

<>
  <Button disabled>Disabled</Button>
  <Button disabled variant="secondary">
    Disabled
  </Button>
  <Button disabled variant="subtle">
    Disabled
  </Button>
</>

Icons

A button can also include icons on either side of the text (or both). When using iconOnly, the iconLeft & iconRight components will be removed.

Edit the code below to see your changes live!

<>
  <Button iconOnly={<AddIcon title="add" />} />
  <Button iconLeft={<AddIcon />}>Label</Button>
  <Button iconLeft={<AddIcon />} iconRight={<ArrowDropDownIcon />}>
    Label
  </Button>
  <Button iconRight={<ArrowDropDownIcon />}>Label</Button>
</>

<>
  <Button iconOnly={<AddIcon title="add" />} />
  <Button iconLeft={<AddIcon />}>Label</Button>
  <Button iconLeft={<AddIcon />} iconRight={<ArrowDropDownIcon />}>
    Label
  </Button>
  <Button iconRight={<ArrowDropDownIcon />}>Label</Button>
</>

Beta