OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Button

Displays a clickable button element.

 <Button>Button</Button>

API Reference

Prop	Type	Default
`color`	`"gray" \| "purple" \| "red"`	`"gray"`
`ghost`	`boolean`	`false`
`loading`	`boolean`	`false`
`size`	`"1" \| "2" \| "3" \| "4"`	`"2"`

This component is based on the button element and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

Colors

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

 <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>