WorkDS Docs Homepage

Badge

Displays a stylized badge element.

Props

asChild

boolean

color

grayyellowredpurplebluegreen
Default: gray

lowContrast

booleanDefault: false

size

123

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

Usage

color
gray
yellow
red
purple
blue
green
lowContrast
size
1
2
3
<Badge size="1">Badge</Badge>

Colors

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

High contrast

Use the highContrast prop to control whether a higher contrast color combination is used.

Sizes

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

With Code component

You can compose Badge together with the Code component.

Use the following Badge colors and Code component to represent HTTP response codes:

Use the following Badge colors and Code component to represent HTTP request methods:

Variants

Dashboard

13 variants found

Informational badge in Sign In Callbackdashboard

/:environmentId/applications/:applicationId

color=blue
Informational badge in Logout Urisdashboard
color=blue
Badge in Features Clientdashboard

/:environmentId/authentication/features

color=gray
Badge in Attribute Status Pilldashboard
Badge in [RequestId]dashboard
Success badge in Actions Tabledashboard
color=green
Success badge in Detection Details Carddashboard
color=green
Destructive badge in Actions Tabledashboard
color=red
Destructive badge in Indexdashboard
color=red
Primary size 1 badge in Chat Headerdashboard
color=purplesize=1
Primary size 1 badge in Navbardashboard
color=purplesize=1
Warning badge in Attribute Mapping Value Missing Markerdashboard
color=yellow
Warning badge in Oauth Settingsdashboard
color=yellow

Admin Portal

2 variants found

Badge in Session Status Badgeadmin-portal

/p/:portalSessionId/sso/:connectionId/completed/connection-sessions-table

color=gray
Informational size 1 badge in Selection Listadmin-portal
color=bluesize=1

Context

PropTypeDefaultRequired
asChild
boolean—no
color
"gray" | "yellow" | "red" | "purple" | "blue" | "green"grayno
lowContrast
booleanfalseno
size
Responsive<"1" | "2" | "3">—no

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

Usage

Used 141 times across 2 packages

Dashboard
115
Admin Portal
26

Variant Distribution

color

gray
21%
yellow
21%
blue
20%
green
14%
red
13%
purple
10%

size

1
100%

Where it's used

92 files

packages/dashboard/src/components/connections/connection-sessions/session-details.tsx6
packages/dashboard/src/components/billing/invoice-card.stories.tsx5
packages/dashboard/src/components/connections/saml-x509-certificate-badge.tsx5
packages/dashboard/src/components/radar/detections/radar-signal-card.tsx4
packages/dashboard/src/legacy-pages/[environmentId]/organizations/[organizationId]/domains/domains-table.tsx4

/p/:portalSessionId/sso

packages/admin-portal/src/app/p/[portalSessionId]/sso/saml-x509-certificate-badge.tsx5

/domains

packages/dashboard/src/app/(private)/(sidebar)/domains/domain-card-email.tsx3
packages/dashboard/src/app/(private)/(sidebar)/domains/domain-status.tsx3
packages/dashboard/src/app/(private)/(sidebar)/domains/domain-card-admin-portal.tsx2

/:environmentId/authentication/oauth-providers

packages/dashboard/src/app/(private)/(sidebar)/[environmentId]/authentication/oauth-providers/oauth-providers-client.tsx2

Show 82 more files