Badge

Use badges to show counts or status indicators, such as unread notifications or new items.

Default Badge

<span class="badge">5</span>
<span class="badge">12</span>
<span class="badge">99+</span>

Badge Sizes

<span class="badge badge-sm">3</span>
<span class="badge">5</span>
<span class="badge badge-lg">12</span>

Badge Colours

<span class="badge">Default</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-error">Error</span>
<span class="badge badge-info">Info</span>

Badge with Button

Position a badge relative to a button or icon to show notification counts.

<span class="badge-container">
  <button class="btn btn-secondary">Messages</button>
  <span class="badge">3</span>
</span>

Badge with Text

<p>Inbox <span class="badge">5</span></p>
<p>Notifications <span class="badge badge-error">3 new</span></p>

When to Use

Use badges for:

• Unread notification counts
• New items since last visit
• Status indicators
• Highlighting important numbers

Don't use badges for:

• Decorative purposes
• Static information that doesn't change
• Long text content (use tags instead)

Usage Guidelines

Do

• Keep badge content short (numbers or short text)
• Use consistent colours for the same meaning
• Position badges consistently
• Update badges in real-time when counts change

Don't

• Don't show "0" badges — hide them instead
• Don't overuse badges on a page
• Don't rely on colour alone to convey meaning

Accessibility

• Badge content should be meaningful text or numbers
• Consider adding screen reader context (e.g., "3 unread messages")
• Colour alone should not convey meaning
• Badges should be associated with their context

CSS Classes

/* Base badge */
.badge { }

/* Sizes */
.badge-sm { }
.badge-lg { }

/* Colours */
.badge-success { }
.badge-warning { }
.badge-error { }
.badge-info { }

/* Container for positioned badges */
.badge-container { }