Badges
Small status and count indicators for labels, notifications, and categorization.
Badge Variants
Badges come in various color variants to convey different meanings.
Primary
Secondary
Success
Danger
Warning
Info
HTML
<span class="focus-badge focus-badge-primary">Primary</span>
<span class="focus-badge focus-badge-secondary">Secondary</span>
<span class="focus-badge focus-badge-success">Success</span>
<span class="focus-badge focus-badge-danger">Danger</span>
<span class="focus-badge focus-badge-warning">Warning</span>
<span class="focus-badge focus-badge-info">Info</span>Pill Badges
Add .focus-badge-pill for fully rounded badge corners.
Primary
Secondary
Success
Danger
Warning
Info
HTML
<span class="focus-badge focus-badge-primary focus-badge-pill">Primary</span>
<span class="focus-badge focus-badge-success focus-badge-pill">Success</span>
<span class="focus-badge focus-badge-danger focus-badge-pill">Danger</span>Status Badges
Special badge classes for common status indicators.
Active
Inactive
Active
Inactive
HTML
<span class="focus-badge focus-badge-active">Active</span>
<span class="focus-badge focus-badge-inactive">Inactive</span>Badges with Icons
Combine badges with icons for enhanced visual communication.
Verified
Failed
Warning
Info
HTML
<span class="focus-badge focus-badge-success">
<i class="fa fa-check"></i> Verified
</span>
<span class="focus-badge focus-badge-danger">
<i class="fa fa-times"></i> Failed
</span>Badges in Context
Examples of badges used in real-world scenarios.
Notifications
12
Status:
Online
Category:
JavaScript
CSS
HTML
HTML
<!-- Notification Count -->
<h4>Notifications</h4>
<span class="focus-badge focus-badge-danger focus-badge-pill">12</span>
<!-- Button with Badge -->
<button class="focus-btn focus-btn-primary">
Messages <span class="focus-badge focus-badge-secondary">5</span>
</button>
<!-- Status Indicator -->
<span class="focus-badge focus-badge-success">Online</span>
<!-- Category Tags -->
<span class="focus-badge focus-badge-primary focus-badge-pill">JavaScript</span>
<span class="focus-badge focus-badge-primary focus-badge-pill">CSS</span>CSS Classes Reference
| Class | Description |
|---|---|
.focus-badge |
Base badge class |
.focus-badge-primary |
Primary color variant |
.focus-badge-secondary |
Secondary color variant |
.focus-badge-success |
Success color variant |
.focus-badge-danger |
Danger color variant |
.focus-badge-warning |
Warning color variant |
.focus-badge-info |
Info color variant |
.focus-badge-pill |
Fully rounded badge shape |
.focus-badge-active |
Active status badge (success style) |
.focus-badge-inactive |
Inactive status badge (danger style) |