Badges

Compact components for displaying status, labels, and counts with various styles and interactive features.

Basic Variants

Color Variants
All available badge color variants from shadcn-ui
DefaultSecondaryDestructiveOutlineGhostLink
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="outline">Outline</Badge>

Semantic Color Variants

Semantic Colors from Design System
Badge variants based on the semantic color palette defined in design tokens

Basic Semantic Badges

Accent TealSuccess GreenWarning YellowError RedInfo Blue

With Icons

AccentSuccessWarningErrorInfo

Loading States

ProcessingCompletingAnalyzing

Dismissible Semantic Badges

Accent TagSuccess TagWarning TagError TagInfo Tag
// Semantic color variants from design tokens:
// - accent: Teal (#14B8A6) - Icons, hover, focus
// - success: Green (#22C55E) - Success states
// - warning: Yellow (#F59E0B) - Warnings
// - error: Red (#EF4444) - Errors
// - info: Blue (#3B82F6) - Notices

<Badge variant="accent">Accent</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>
<Badge variant="info">Info</Badge>

Badges with Icons

Icon Placement
Badges with icons at the start or end

Icon at Start

MessagesNotificationsErrorFeatured

Icon at End

SuccessInfoPremium
<Badge>
  <Mail className="w-3 h-3" data-icon="inline-start" />
  Messages
</Badge>

Loading Badges

Loading States
Badges with loading spinners for async operations
Loading...ProcessingSyncingUpdating
<Badge>
  <Loader2 className="w-3 h-3 animate-spin" data-icon="inline-start" />
  Loading...
</Badge>

Dismissible Badges

Interactive Dismiss
Badges that can be dismissed by the user
Default BadgeSecondary BadgeDestructive BadgeOutline BadgeGhost Badge
const [dismissed, setDismissed] = useState(false);

{!dismissed && (
  <Badge>
    Label
    <button onClick={() => setDismissed(true)}>
      <X className="w-3 h-3" data-icon="inline-end" />
    </button>
  </Badge>
)}

Combined Examples

Real-world Usage
Practical examples combining variants, icons, and interactivity

Status Indicators

ActivePendingFailedDraft

Notification Counts

12 New5 Urgent3 Featured

Tags with Dismiss

ReactTypeScriptNext.js
Badge Guidelines

Purpose: Use badges to highlight status, labels, counts, or categories. They should be concise and easy to scan.

Variants: Choose variants based on importance - default for primary actions, secondary for neutral information, destructive for errors or warnings, and outline for subtle emphasis.

Icons: Add icons to provide visual context. Use data-icon="inline-start" or data-icon="inline-end" attributes for proper spacing.

Loading States: Use the Loader2 icon with animate-spin class to indicate ongoing processes or async operations.

Dismissible: Make badges dismissible when they represent temporary states or user-added tags. Always provide a way to restore dismissed badges if needed.

Accessibility: Ensure dismiss buttons have proper aria-labels and that color is not the only indicator of meaning.