Badges

Status indicators, category labels, and notification markers.

Color Variants

Filled Badges

Active Recruiting Review Pending At Risk Marketing

HTML

<span class="monarch-badge monarch-badge-success">Active</span>
<span class="monarch-badge monarch-badge-info">Recruiting</span>
<span class="monarch-badge monarch-badge-purple">Review</span>
<span class="monarch-badge monarch-badge-warning">Pending</span>
<span class="monarch-badge monarch-badge-danger">At Risk</span>
<span class="monarch-badge monarch-badge-pink">Marketing</span>

With Dot Indicator

Dot Badges

Online Away Offline

HTML

<span class="monarch-badge monarch-badge-success">
  <span class="monarch-badge__dot monarch-badge__dot--pulse"></span> Online
</span>

Outlined

Outlined Badges

Prospecting Qualification Proposal Negotiation Closed Lost

HTML

<span class="monarch-badge monarch-badge-success monarch-badge-outlined">Prospecting</span>

Sizes

Badge Sizes

Small Default Large

HTML

<span class="monarch-badge monarch-badge-purple monarch-badge-sm">Small</span>
<span class="monarch-badge monarch-badge-purple">Default</span>
<span class="monarch-badge monarch-badge-purple monarch-badge-lg">Large</span>

Notification Counter

Count Badges

99+

HTML

<span class="monarch-badge-count">3</span>
<span class="monarch-badge-count monarch-badge-count-purple">12</span>

Usage Guidelines

• Green → Active, Online, Success, Healthy, Prospecting

• Blue → Info, Recruiting, In Progress, Qualification

• Indigo → Review, Featured, Proposal, Brand-related

• Amber → Warning, Pending, Away, Negotiation

• Red → Alert, At Risk, Error, Closed Lost

• Violet → Marketing, Social, Engagement

• Use filled badges in tables and lists for high visibility

• Use outlined badges for pipeline stages and categories

• Use dot indicators for real-time status (online/away/offline)