Components
A versatile badge component for displaying status, categories, or metadata
Components
A versatile badge component for displaying status, categories, or metadata
A versatile badge component for displaying status, categories, or metadata. Built with accessibility in mind and supporting various visual styles.
When to Use
Use badges to highlight status, categorize content, or display compact metadata. They work well inline with text or as standalone elements.
Simple badge with default styling
<Badge>New</Badge>Different semantic variants for different purposes
<div className="flex flex-wrap items-center gap-2">
<Badge variant="normal">Default</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="destructive">Destructive</Badge>
</div>Two size options for different contexts
<div className="flex items-center gap-4">
<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>
</div>Add icons to the left or right of badge text
<div className="flex flex-wrap items-center gap-3">
<Badge variant="success" leftIcon={<MdCheck className="h-3 w-3" />}>
Completed
</Badge>
<Badge variant="warning" leftIcon={<MdWarning className="h-3 w-3" />}>
Warning
</Badge>
<Badge variant="info" leftIcon={<MdInfo className="h-3 w-3" />}>
Information
</Badge>
<Badge variant="destructive" leftIcon={<MdClose className="h-3 w-3" />}>
Failed
</Badge>
<Badge variant="normal" rightIcon={<MdStar className="h-3 w-3" />}>
Featured
</Badge>
</div>Common status patterns for tasks and workflows
<div className="flex gap-2">
<Badge variant="normal">Contacted</Badge>
<Badge variant="info">Lead</Badge>
<Badge variant="warning">Qualified</Badge>
<Badge variant="success">Converted</Badge>
</div>Display priority or importance levels
<div className="flex gap-2">
<Badge variant="destructive" size="sm">High</Badge>
<Badge variant="warning" size="sm">Medium</Badge>
<Badge variant="normal" size="sm">Low</Badge>
</div>Display user roles or permissions
<div className="flex gap-2">
<Badge variant="success">Admin</Badge>
<Badge variant="info">Editor</Badge>
<Badge variant="normal">Viewer</Badge>
</div>Badges with icons for system feedback
<div className="flex flex-col gap-2">
<Badge variant="success" leftIcon={<MdCheck className="h-3 w-3" />}>
Email Delivery Complete
</Badge>
<Badge variant="warning" leftIcon={<MdWarning className="h-3 w-3" />}>
Email Delivery Pending
</Badge>
<Badge variant="destructive" leftIcon={<MdClose className="h-3 w-3" />}>
Email Delivery Failed
</Badge>
</div>Badges that can be dismissed or removed
<div className="flex flex-wrap gap-2">
<Badge
variant="normal"
rightIcon={<MdClose className="h-3 w-3 cursor-pointer hover:text-ink-dark" />}
className="cursor-default hover:bg-muted"
>
Contacted
</Badge>
<Badge
variant="success"
rightIcon={<MdClose className="h-3 w-3 cursor-pointer hover:text-ink-dark" />}
className="cursor-default hover:bg-green-200"
>
Lead
</Badge>
<Badge
variant="info"
rightIcon={<MdClose className="h-3 w-3 cursor-pointer hover:text-ink-dark" />}
className="cursor-default hover:bg-blue-200"
>
Qualified
</Badge>
</div>Choose badge variants that match the meaning of the content (success for completed, warning for attention needed, etc.).
Badge text should be short and scannable. Use 1-2 words when possible.
Stick to one badge size within a component or section for visual consistency.
Badges are for display only. If you need an interactive element, use a button or chip component instead.
Too many colored badges in one view creates visual noise. Use neutral badges for less important information.
Avoid lengthy text in badges. If you need more space, consider using a different component.
Color and Meaning
Don't rely solely on color to convey meaning. Use icons or text to reinforce the badge's purpose.