Badge

Data Display

Status

Status indicators and labels with multiple variants, sizes, and icon support.

Preview

Badge variants for different contexts

Default

Primary

Secondary

Success

Warning

Error

Info

Violet

Outline

Muted

Inverse Variants

White background badges for colored backgrounds

Standard

Inverse

Standard

Inverse

Standard

Inverse

Sizes

Four badge sizes: small, medium, large, and extra large

Small

Medium

Large

Extra Large

With Dot Indicator

Add a status dot for visual clarity

Active

Pending

Offline

In Progress

Beta

Ghost Variants (Dot Only)

Minimal status indicators without background - perfect for inline status

Pending

Current

Approved

Rejected

Ghost variants have no background or border, just a colored dot and text. Use size="compact" for minimal spacing.

Approval Chain Example

Sarah Chen · Team Lead

Approved

Mike Johnson · Manager

Current

Emily Davis · VP

Pending

With Icons

Add icons for better visual communication

Verified

Rejected

Warning

Info

Featured

New

Shapes

Default rounded and pill shapes

Default (6px radius)

Primary

Success

Warning

Pill (fully rounded)

Primary

Success

Warning

AI Variants

Indicate AI-generated or human-edited AI content

Edited

The AI variants automatically include the Sparkles icon. Use these to indicate AI-generated content or content that has been edited by a human after AI generation.

Confidence Variants

Display AI confidence levels with color-coded badges

92%

67%

45%

High (80-100%) - Teal

Medium (60-79%) - Amber

Low (0-59%) - Rose

Real-World Examples

Common badge usage patterns

Server Status

Online

Database

Maintenance

API Service

Down

Props

Badge component API reference

Prop	Type	Default	Description
`variant`	`'default' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info' \| 'violet' \| 'outline' \| 'muted' \| 'inverse-' \| 'ai' \| 'ai-edited' \| 'confidence-' \| 'ghost' \| 'ghost-*'`	`'default'`	Visual variant
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'compact'`	`'md'`	Badge size (compact for ghost variants)
`shape`	`'default' \| 'pill'`	`'default'`	Badge shape
`icon`	`ReactNode`	—	Icon to display before label
`dot`	`boolean`	`false`	Show status dot indicator
`dotColor`	`string`	—	Custom dot color
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation example

import { Badge } from '@/components/ui/badge'
import { Check, Star } from 'lucide-react'

export default function Example() {
  return (
    <>
      {/* Basic badges */}
      <Badge>Default</Badge>
      <Badge variant="primary">Primary</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="warning">Warning</Badge>
      <Badge variant="error">Error</Badge>

      {/* Sizes */}
      <Badge size="sm">Small</Badge>
      <Badge size="md">Medium</Badge>
      <Badge size="lg">Large</Badge>
      <Badge size="xl">Extra Large</Badge>

      {/* With dot indicator */}
      <Badge variant="success" dot>Active</Badge>
      <Badge variant="error" dot>Offline</Badge>

      {/* With icon */}
      <Badge variant="primary" icon={<Star className="w-3 h-3" />}>
        Featured
      </Badge>
      <Badge variant="success" icon={<Check className="w-3 h-3" />}>
        Verified
      </Badge>

      {/* Pill shape */}
      <Badge shape="pill">Rounded</Badge>

      {/* Inverse variants (for colored backgrounds) */}
      <Badge variant="inverse-primary">Inverse Primary</Badge>
      <Badge variant="inverse-success">Inverse Success</Badge>

      {/* Outline variant (with border) */}
      <Badge variant="outline">With Border</Badge>

      {/* Custom dot color */}
      <Badge dot dotColor="var(--color-emerald-500)">
        Custom Color
      </Badge>

      {/* Ghost variants (dot + text only, no background) */}
      <Badge variant="ghost" size="compact" dot>Pending</Badge>
      <Badge variant="ghost-success" size="compact" dot>Approved</Badge>
      <Badge variant="ghost-error" size="compact" dot>Rejected</Badge>
      <Badge variant="ghost-primary" size="compact" dot>Current</Badge>
    </>
  )
}

Features

Built-in functionality

27 variants: 10 standard + 6 inverse + 2 AI + 3 confidence + 6 ghost
Five sizes: sm, md, lg, xl + compact for ghost variants
Borderless design: Clean look matching confidence indicator style
Dot indicator: Optional status dot with custom colors
Icon support: Add icons before badge text
Two shapes: Default rounded (6px) and pill (fully rounded)
Inverse variants: White background for colored cards
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses semantic span elementColor is not the only indicatorDot provides additional visual cue

Keyboard Navigation

Key	Action
`N/A`	Badge is not focusable by default

Notes

Combine color with text/icons for clarity
Use meaningful status text
Consider screen reader announcements for dynamic badges
Dot indicator adds visual redundancy

Related Components

Avatar Tag Status Indicator Confidence Indicator