Badges

Small status and count indicators for labels, notifications, and categorization.

Basic Example

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>

Badge Sizes

Use .focus-badge-sm for smaller badges with absolute sizing (11px font, 10px icons).

Default Badge Small Badge Default with Icon Small with Icon
HTML 
<span class="focus-badge focus-badge-primary">Default Badge</span>
<span class="focus-badge focus-badge-primary focus-badge-sm">Small Badge</span>
<span class="focus-badge focus-badge-success focus-badge-icon-left"><i class="fa fa-check"></i> Default with Icon</span>
<span class="focus-badge focus-badge-success focus-badge-sm focus-badge-icon-left"><i class="fa fa-check"></i> Small with Icon</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>

Icon Positioning

Use .focus-badge-icon-left and .focus-badge-icon-right to control icon placement:

JavaScript TypeScript Verified Featured
HTML 
<!-- Icon on left -->
<span class="focus-badge focus-badge-warning focus-badge-icon-left">
  <i class="fab fa-js"></i> JavaScript
</span>

<!-- Icon on right -->
<span class="focus-badge focus-badge-info focus-badge-icon-right">
  TypeScript <i class="fab fa-js"></i>
</span>

Icon-Only Badges

Use .focus-badge-icon-only for badges containing just an icon:

HTML 
<span class="focus-badge focus-badge-primary focus-badge-icon-only">
  <i class="fa fa-heart"></i>
</span>
<span class="focus-badge focus-badge-success focus-badge-icon-only">
  <i class="fa fa-check"></i>
</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-icon-left Badge with icon on the left side of text
.focus-badge-icon-right Badge with icon on the right side of text
.focus-badge-icon-only Badge containing only an icon (square/circular)
.focus-badge-active Active status badge (success style)
.focus-badge-inactive Inactive status badge (danger style)