Badge
A small status or labelling pill that composes inline with text.
When to use
- Status indicators — active, pending, archived.
- Category labels — tags on cards, filter chips.
- Counts — unread messages, notification counts.
When NOT to use
- For long descriptions — keep badge text to 1-2 words.
- For interactive filters — use a toggle button or chip component.
Import
import { Badge } from '@mihcm/ui/Badge';Basic usage
<Badge>Active</Badge>Variants
| Variant | Use when |
|---|---|
default | Primary status, the most prominent. |
secondary | Lower emphasis alongside a primary badge. |
destructive | Error or critical status. |
success | Positive outcome or active state. |
warning | Caution or pending state. |
outline | Minimal, text-only with a border. |
Composition
- Badge renders a
<span>so it sits inline with text and headings. - Pair with an icon as a child for added context:
<Badge><CheckIcon className="size-3" /> Done</Badge>.
Related
- Alert — for longer messages with titles and descriptions.