Badge Component

Badges are small status descriptors for UI elements. They help to highlight status information such as labels or counters.

Variants

Default

Secondary

Success

Destructive

Warning

Outline

Dark

Blue

Code Example

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="dark">Dark</Badge>
<Badge variant="blue">Blue</Badge>

With Icons

Completed

Pending

Failed

Code Example

<Badge variant="success" className="flex items-center gap-1">
  <svg>...</svg>
  Completed
</Badge>

<Badge variant="warning" className="flex items-center gap-1">
  <svg>...</svg>
  Pending
</Badge>

<Badge variant="destructive" className="flex items-center gap-1">
  <svg>...</svg>
  Failed
</Badge>

Usage Examples

Project Status

Active

Dashboard redesign project

Feature Request

New

Enhancement

Dark mode support

Card with Status

<div className="p-4 border rounded-md">
  <div className="flex justify-between items-center mb-2">
    <Typography variant="body-l" className="font-medium">
      Project Status
    </Typography>
    <Badge variant="success">Active</Badge>
  </div>
  <Typography variant="body-s" className="text-gray-600">
    Dashboard redesign project
  </Typography>
</div>

Multiple Badges

<div className="flex items-center gap-2">
  <Typography variant="body-l" className="font-medium">
    Feature Request
  </Typography>
  <Badge variant="outline">New</Badge>
  <Badge variant="blue">Enhancement</Badge>
</div>

Design Guidelines

When using badges in your UI, keep these principles in mind:

Use badges sparingly to avoid visual clutter
Choose badge colors that provide sufficient contrast with the background
Keep badge text short and concise
Use consistent badge styles across your application
Consider using different badge variants to indicate different states or severities