 <Flex align="center" gap="4">
  <Button color="purple">Purple</Button>
  <Button color="gray">Gray</Button>
  <Button color="red">Red</Button>
</Flex>

Ghost

Use the ghost prop to create a deemphasized button.

 <Flex align="center" gap="4">
  <Button ghost color="purple">
    Purple
  </Button>
  <Button ghost color="gray">
    Gray
  </Button>
  <Button ghost color="red">
    Red
  </Button>
</Flex>

Sizes

Use the size prop to control the size of the button.

 <Flex align="center" gap="4">
  <Button size="1">Size 1</Button>
  <Button size="2">Size 2</Button>
  <Button size="3">Size 3</Button>
  <Button size="4">Size 4</Button>
</Flex>

States

The state prop is deprecated, as the types of state it represents may not be mutually exclusive. Use disabled or loading instead.

Use the loading prop to indicate that the button is in a loading state. When loading is true the button is disabled by default.

When button changes to a loading state, screen readers announce “Loading, please wait.”

 <Flex gap="5">
  <Grid align="center" columns="3" gap="4">
    <Button color="purple">Purple</Button>
    <Button color="gray">Gray</Button>
    <Button color="red">Red</Button>
    <Button color="purple" disabled>
      Purple
    </Button>
    <Button color="gray" disabled>
      Gray
    </Button>
    <Button color="red" disabled>
      Red
    </Button>
    <Button color="purple" loading>
      Purple
    </Button>
    <Button color="gray" loading>
      Gray
    </Button>
    <Button color="red" loading>
      Red
    </Button>
  </Grid>
  <Grid align="center" columns="3" gapX="5" gapY="4">
    <Button ghost color="purple">
      Purple
    </Button>
    <Button ghost color="gray">
      Gray
    </Button>
    <Button ghost color="red">
      Red
    </Button>
    <Button ghost color="purple" disabled>
      Purple
    </Button>
    <Button ghost color="gray" disabled>
      Gray
    </Button>
    <Button ghost color="red" disabled>
      Red
    </Button>
    <Button ghost color="purple" loading>
      Purple
    </Button>
    <Button ghost color="gray" loading>
      Gray
    </Button>
    <Button ghost color="red" loading>
      Red
    </Button>
  </Grid>
</Flex>

Loading and disabled buttons are focusable for accessibility reasons, but can’t be clicked and don’t submit forms.

 <Grid columns="2" gap="4">
  <form onSubmit={() => alert('Submit!')}>
    <Flex direction="column" gap="3">
      <TextField.Root placeholder="Email" />
      <Button
        color="purple"
        size="2"
        type="submit"
        onClick={() => alert('Click!')}
      >
        Submit
      </Button>
    </Flex>
  </form>

  <form onSubmit={() => alert('Submit!')}>
    <Flex direction="column" gap="3">
      <TextField.Root placeholder="Email" defaultValue="design@workos.com" />
      <Button
        color="purple"
        size="2"
        loading
        type="submit"
        onClick={() => alert('Click!')}
      >
        Please wait…
      </Button>
    </Flex>
  </form>
</Grid>

With icons

You may nest icons directly inside the buttons. The correct gap between the icon and the text is provided automatically.

 <Flex gap="5">
  <Grid align="center" columns="3" gap="4">
    <Button color="purple">
      <StarIcon />
      Purple
    </Button>
    <Button color="gray">
      <StarIcon />
      Gray
    </Button>
    <Button color="red">
      <StarIcon />
      Red
    </Button>
    <Button color="purple" loading>
      <StarIcon />
      Purple
    </Button>
    <Button color="gray" loading>
      <StarIcon />
      Gray
    </Button>
    <Button color="red" loading>
      <StarIcon />
      Red
    </Button>
  </Grid>
  <Grid align="center" columns="3" gapX="5" gapY="4">
    <Button ghost color="purple">
      <StarIcon />
      Purple
    </Button>
    <Button ghost color="gray">
      <StarIcon />
      Gray
    </Button>
    <Button ghost color="red">
      <StarIcon />
      Red
    </Button>
    <Button ghost color="purple" loading>
      <StarIcon />
      Purple
    </Button>
    <Button ghost color="gray" loading>
      <StarIcon />
      Gray
    </Button>
    <Button ghost color="red" loading>
      <StarIcon />
      Red
    </Button>
  </Grid>
</Flex>