ComponentsData Display
Badge
Small label component for status indicators, categories, and counts
The Badge component renders small, inline labels for status indicators, categories, tags, and counts. It supports multiple visual variants and sizes to fit different contexts.
Import
import { Badge } from '@nim-ui/components';Playground
Edit the code — the preview re-renders as you type.
Editable
<div className="flex flex-wrap items-center gap-2.5"> <Badge variant="success" size="lg">Payment settled</Badge> <Badge variant="warning">SLA at risk</Badge> <Badge variant="destructive" size="sm">Failed</Badge> <Badge variant="outline" animate>New</Badge> </div>
Basic Usage
Badge
Code
<Badge>Badge</Badge>Variants
Seven variants are available: three neutral weights, plus destructive, success, warning, and info for status.
Default
Secondary
Outline
Destructive
Success
Warning
Info
Code
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="outline">Outline</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>Sizes
Three size options are available: small, medium (default), and large.
Small
Medium
Large
Code
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
<Badge size="lg">Large</Badge>Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info' | 'default' | Visual style variant of the badge |
size | 'sm' | 'md' | 'lg' | 'md' | Size of the badge |
animate | boolean | - | Play the entry animation on mount, suppressed under reduced motion |
className | string | - | Additional CSS classes to apply |
children* | ReactNode | - | Badge content |
Usage Examples
Status Indicators
function OrderStatus({ status }: { status: string }) {
const variantMap: Record<string, 'default' | 'secondary' | 'destructive'> = {
active: 'default',
pending: 'secondary',
cancelled: 'destructive',
};
return <Badge variant={variantMap[status]}>{status}</Badge>;
}Tags List
function TagList({ tags }: { tags: string[] }) {
return (
<div className="flex flex-wrap gap-2">
{tags.map((tag) => (
<Badge key={tag} variant="outline" size="sm">
{tag}
</Badge>
))}
</div>
);
}Notification Count
function NotificationBadge({ count }: { count: number }) {
return (
<div className="relative inline-flex">
<button>Notifications</button>
{count > 0 && (
<Badge variant="destructive" size="sm" className="absolute -top-2 -right-2">
{count}
</Badge>
)}
</div>
);
}