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

Variants

Dashboard

15 variants found

Primary button in Tax Information Formdashboard

color=purple

Primary button in Custom Attribute Mapping In Admin Portal Dialogdashboard

color=purple

Button in Delete Application Dialogdashboard

/:environmentId/applications/:applicationId

Button in Oauth Providers Clientdashboard

/:environmentId/authentication/oauth-providers

Destructive button in Delete Application Dialogdashboard

/:environmentId/applications/:applicationId

color=red

Destructive button in Delete Log Stream Dialogdashboard

/:environmentId/log-streams/:logStreamId

color=red

Destructive ghost button in Manage Platform Dialogdashboard

ghost=truecolor=red

Destructive ghost button in Manage Custom Email Provider Dialogdashboard

ghost=truecolor=red

Primary ghost size 1 button in Parent Resource Types Selectordashboardstatic

/:environmentId/roles-and-permissions/resource-types/edit/content-panel

<Flex align="center" gap="2" justify="between">
          <Flex align="center" gap="2">
            <Label as="span">Parents</Label>
            <Tooltip
              content={
                <span style={{ maxWidth: 160, display: 'block' }}>
                  This resource type can be assigned to any of the selected
                  parents.
                </span>
              }
            >
              <Flex asChild align="center">
                <span>
                  <InfoCircledIcon
                    color="var(--gray-9)"
                    height={14}
                    width={14}
                  />
                </span>
              </Flex>
            </Tooltip>
          </Flex>
          <Combobox.Anchor>
            <Combobox.Trigger disabled={!hasAvailableParentsToAdd}>
              <Button
                ghost
                color="purple"
                disabled={!hasAvailableParentsToAdd}
                size="1"
                style={{ margin: 0 }}
                {...(open ? { 'data-state': 'open' } : {})}
              >
                <PlusIcon />
                Add parent
              </Button>
            </Combobox.Trigger>
          </Combobox.Anchor>
        </Flex>

ghost=truecolor=purplesize=1

disabled button in Directory Role Mapping Carddashboard

disabled=true

disabled button in Decoy Widgetsdashboard

disabled=true

Destructive size 1 button in Jit Provisioning Dialogdashboard

color=redsize=1

Destructive size 1 button in Connection Metadata Manualdashboard

color=redsize=1

size 1 button in Add User To Organization Dialogdashboard

size=1

size 1 button in Jit Provisioning Dialogdashboard

size=1

Context

Prop	Type	Default	Required
`asChild`	`boolean`	—	no
`color`	`"gray" \| "yellow" \| "red" \| "purple"`	`gray`	no
`ghost`	`boolean`	`false`	no
`highContrast`	`boolean`	—	no
`loading`	`boolean`	`false`	no
`radius`	`"small" \| "none" \| "medium" \| "large" \| "full"`	—	no
`size`	`Responsive<"1" \| "2" \| "3" \| "4">`	—	no
`state`deprecated	`"disabled" \| "normal" \| "loading"`	—	no
`type`	`"button" \| "submit" \| "reset" \| null`	`button`	no

Also supports MarginProps: m, mb, ml, mr, mt, mx, my

stateType: "disabled" | "normal" | "loading"

Usage

Used 1021 times across 2 packages

Dashboard

941

Admin Portal

Variant Distribution

color

purple

61%

red

19%

gray

19%

yellow

ghost

true

100%

size

53%

42%

disabled

true

100%

radius

full

100%

true

50%

false

50%

Where it's used

504 files

packages/dashboard/src/legacy-pages/[environmentId]/organizations/[organizationId]/domains/add-domains-dialog/add-domains-dialog.spec.tsx14

packages/dashboard/src/components/self-service-slack-channel/self-service-slack-channel-callout.tsx12

packages/dashboard/src/components/organizations/organization/admin-invitation.tsx8

packages/dashboard/src/components/billing/invoice-card.stories.tsx7

packages/dashboard/src/components/configuration/stripe-entitlements/dialogs/connected-dialog.tsx7

packages/dashboard/src/components/organizations/organization/domain-policy-dialog.tsx7

packages/dashboard/src/components/users/user-details.tsx7

packages/dashboard/src/components/configuration/request-oauth.tsx6

packages/dashboard/src/components/events/datadog-stream-configuration.tsx6

/:environmentId/authentication

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/authentication/authentication-legacy.tsx8

Show 494 more files

Button

On this page

Props

`asChild`

`color`

`ghost`

`highContrast`

`loading`

`radius`

`size`

`type`

Deprecated

`state`

Usage

Colors

Ghost

Sizes

States

With icons

Variants

Dashboard

Context

Full API Reference

Deprecated

Usage Statistics

Usage

Variant Distribution

Where it's used

Button

Props

asChild

color

ghost

highContrast

loading

radius

size

type

Deprecated

state

Usage

Colors

Ghost

Sizes

States

With icons

Variants

Dashboard

Context

Full API Reference

Full API Reference

Deprecated1

Deprecated

Usage Statistics

Usage Statistics

Usage

Variant Distribution

Where it's used

`asChild`

`color`

`ghost`

`highContrast`

`loading`

`radius`

`size`

`type`

`state`