Badges
Status indicators and labels for states, tags, and metadata.
Status Badges
activependingpausedpaidcancelled
<span class="badge-active">active</span><span class="badge-pending">pending</span><span class="badge-paused">paused</span><span class="badge-paid">paid</span><span class="badge-cancelled">cancelled</span>Custom Tags
Use utility classes for one-off badges:
AI Revenue SaaS
<span class="text-[9px] font-mono uppercase tracking-wider text-accent-primary bg-accent-primary/10 border border-accent-primary/20 px-2 py-0.5 rounded-full">AI</span>