Atom

Badge

Status indicator component for displaying labels, tags, and status information with semantic colors.

Overview

The Badge component displays status indicators, labels, and tags with semantic color coding. Use it to communicate state (active, pending, error) or categorize content (roles, types).

Active

Pending

Inactive

Error

Props

Prop	Type	Default	Description
`label`	`string`	-	Badge text content
`size`	`ResponsiveValue<'sm' \| 'md' \| 'lg'>`	`'md'`	Badge size - can be responsive
`color`	`'neutral' \| 'primary' \| 'primary-alt' \| 'success' \| 'warning' \| 'danger' \| 'info'`	`'neutral'`	Semantic color variant
`variant`	`'solid' \| 'soft' \| 'outline'`	`'soft'`	Visual style variant
`iconStart`	`ReactNode`	-	Icon before label
`iconEnd`	`ReactNode`	-	Icon after label
`dot`	`boolean`	`false`	Show dot indicator

Variants

Colors (Semantic)

Colors communicate meaning - use them consistently.

Neutral

Primary

Alt

Success

Warning

Danger

Info

<Badge label="Success" color="success" />  {/* Active, Enabled */}
<Badge label="Warning" color="warning" />  {/* Pending, Locked */}
<Badge label="Danger" color="danger" />    {/* Error, Failed */}

Visual Variants

Three visual styles for different emphasis levels.

Solid

Soft

Outline

<Badge label="Solid" variant="solid" />    {/* High emphasis */}
<Badge label="Soft" variant="soft" />      {/* Medium (default) */}
<Badge label="Outline" variant="outline" /> {/* Low emphasis */}

Sizes

Three size options for different contexts.

Small

Medium

Large

<Badge label="Small" size="sm" />
<Badge label="Medium" size="md" />
<Badge label="Large" size="lg" />

Examples

Status Badges (from your app)

Common status patterns seen in the People Directory.

Active

Invited

Locked

Not a User

Role/Type Badges

Identity type badges from the People Directory.

Practitioner

Patient

Dual Identity

Non-User

With Dot Indicator

Add a dot for extra visual emphasis on status.

Online

Away

Offline

<Badge label="Online" color="success" dot />

All Variants × Colors