Badge
Badge Component
Small status indicators and labels. Perfect for tags, counts, and status displays.
Import
import { Badge } from '@covers/ui';Usage
import { Badge } from '@covers/ui';
// Variants
<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Error</Badge>
// With icon
<Badge className="gap-1">
<Circle className="w-2 h-2 fill-green-500" />
Online
</Badge>
// In context
<div className="flex items-center gap-2">
<span>Status:</span>
<Badge variant="secondary">Active</Badge>
</div>Props
| Name | Type | Description |
|---|---|---|
| variant | "default" | "secondary" | "outline" | "destructive" | Visual style |
Default Styling
px-2.5 py-0.5 text-xs font-semibold rounded-full
Part of CoverKit
This component is part of CoverKit (@covers/ui), a dark-first React component library.