WorkDS Docs Homepage

Status

Displays a color coded status indicator.

Props

color

required
grayyellowredgreen

as

divspan

Element type to render as

disableTextColor

boolean

When true, the text will use the default color while the indicator remains colored

truncate

boolean

Whether to truncate text with ellipsis

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

Usage

Colors

Use the color prop to set the color of your component.

Variants

Dashboard

7 variants found

Success status in Connected Dialogdashboard
color=green
Success status in Authorized Platforms Clientdashboard

/settings/authorized-platforms

color=green
Status in Members Tabledashboard
Status in Connection State Pilldashboard
Status in Connected Accountsdashboard
color=gray
Status in Audit Logs Providerdashboardstatic
<> <Button onClick={() => router.push(`/${environmentId}/audit-logs`)}> Configure audit logs </Button> <Status color="gray">No events received</Status> </>
color=gray
Warning status in Connected Accountsdashboardstatic
<Flex align="center" gap="2"> <Text>{organizationName ?? 'Personal account'}</Text> {needsReauth && ( <Status color="yellow" style={{ gap: 'var(--space-2)' }}> Needs reauthorization </Status> )} </Flex>
color=yellow

Context

PropTypeDefaultRequired
color
"gray" | "yellow" | "red" | "green"—yes
as
"div" | "span"—no
disableTextColor
boolean—no
truncate
boolean—no

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

Usage

Used 39 times across 1 package

Dashboard
39

Variant Distribution

color

green
57%
gray
29%
yellow
10%
red
5%

Where it's used

29 files

packages/dashboard/src/components/radar/configuration-page/managed-lists-card.tsx4
packages/dashboard/src/components/users/userland-sessions-table-new.tsx3
packages/dashboard/src/components/command-palette/utils/formatters.tsx2
packages/dashboard/src/components/organizations/organization/audit-logs-provider.tsx2
packages/dashboard/src/components/radar/configuration-page/configuration-status.tsx2
packages/dashboard/src/components/users/connected-accounts.tsx2
packages/dashboard/src/components/users/email-suppression-card.tsx2
packages/dashboard/src/components/configuration/stripe-entitlements/dialogs/connected-dialog.tsx1

/:environmentId/authentication/integrations

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/authentication/integrations/integrations-client.tsx1

/settings/authorized-platforms

packages/dashboard/src/app/(private)/(sidebar)/settings/authorized-platforms/authorized-platforms-client.tsx1

Show 19 more files