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

Props

Prop Type Default Description
label string - Badge text content
size 'sm' | 'md' | 'lg' 'md' Badge size
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
testID string - Test ID for testing purposes
accessibilityLabel string label Accessibility label for screen readers

Variants

Colors (Semantic)

Colors communicate meaning - use them consistently.

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

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

Sizes

Three size options for different contexts.

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

Examples

Status Badges (from your app)

Common status patterns seen in the People Directory.

Role/Type Badges

Identity type badges from the People Directory.

With Dot Indicator

Add a dot for extra visual emphasis on status.

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

All Variants × Colors

Accessibility

  • Color is not the only indicator: Text labels provide meaning, not just color.
  • Contrast: All color variants meet WCAG AA contrast requirements.
  • Screen Reader: Badge content is read naturally by assistive technology.

Best Practices

  • Add custom accessibilityLabel if the default label is not descriptive or semantic.
  • Icon color and other styling props (SVG size) should be adjusted manually. Match the icon color to the badge's label for consistency.