Badge

Compact visual indicators for status, categories, counts, and labels. Badges draw attention to important information.

Status Badges

Use semantic colors to communicate status at a glance.

Active Pending Offline New Draft 
<span class="badge badge-success">Active</span>
<span class="badge badge-warning">Pending</span>
<span class="badge badge-error">Offline</span>
<span class="badge badge-info">New</span>
<span class="badge badge-neutral">Draft</span>

Persona Badges

Use persona colors for team member identification.

Ferni Maya Alex Jordan Peter Nayan 
<span class="badge badge-persona-ferni">Ferni</span>
<span class="badge badge-persona-maya">Maya</span>
<span class="badge badge-persona-alex">Alex</span>
<span class="badge badge-persona-jordan">Jordan</span>
<span class="badge badge-persona-peter">Peter</span>
<span class="badge badge-persona-nayan">Nayan</span>

Size Variants

Badges come in three sizes to fit different contexts.

Small Small - metadata, tables
Default Default - most uses
Large Large - emphasis 
<span class="badge badge-sm badge-info">Small</span>
<span class="badge badge-info">Default</span>
<span class="badge badge-lg badge-info">Large</span>

Pill Badges

Fully rounded badges for softer appearance.

Completed In Progress Not Started 
<span class="badge badge-pill badge-success">Completed</span>
<span class="badge badge-pill badge-warning">In Progress</span>
<span class="badge badge-pill badge-neutral">Not Started</span>

Outlined Badges

Subtle variant with border instead of fill.

Active Pending Error Info 
<span class="badge badge-outline badge-success">Active</span>
<span class="badge badge-outline badge-warning">Pending</span>
<span class="badge badge-outline badge-error">Error</span>
<span class="badge badge-outline badge-info">Info</span>

Badges with Icons

Add icons for additional visual context.

Verified Attention Blocked 
<span class="badge badge-success">
  <svg>...check icon...</svg>
  Verified
</span>

Notification Dots

Small indicator dots for notification counts or presence.

Unread
Online
Pending 
<button class="icon-btn">
  <svg>...icon...</svg>
  <span class="badge-dot badge-dot-error"></span>
</button>

Count Badges

Display numeric counts, useful for notifications and totals.

Messages
Notifications
Cart 
<button class="icon-btn">
  <svg>...icon...</svg>
  <span class="badge-count">12</span>
</button>

Removable Tags

Interactive badges that can be dismissed.

Productivity Wellness Focus 
<span class="badge badge-tag">
  Productivity
  <button class="badge-remove" aria-label="Remove tag">
    <svg>...x icon...</svg>
  </button>
</span>

CSS Implementation

/* Base Badge */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Status Colors */
.badge-success {
  background: var(--success-subtle);
  color: var(--success);
}

.badge-warning {
  background: var(--warning-subtle);
  color: var(--warning-text);
}

.badge-error {
  background: var(--error-subtle);
  color: var(--error);
}

.badge-info {
  background: var(--accent-subtle);
  color: var(--accent-primary);
}

.badge-neutral {
  background: var(--bg-secondary);
  color: var(--text-muted);
}

/* Persona Colors */
.badge-persona-ferni { background: var(--persona-ferni-subtle); color: var(--persona-ferni); }
.badge-persona-maya { background: var(--persona-maya-subtle); color: var(--persona-maya); }
.badge-persona-alex { background: var(--persona-alex-subtle); color: var(--persona-alex); }
.badge-persona-jordan { background: var(--persona-jordan-subtle); color: var(--persona-jordan); }
.badge-persona-peter { background: var(--persona-peter-subtle); color: var(--persona-peter); }
.badge-persona-nayan { background: var(--persona-nayan-subtle); color: var(--persona-nayan); }

/* Sizes */
.badge-sm {
  padding: 2px var(--space-1);
  font-size: var(--text-2xs);
}

.badge-lg {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

/* Variants */
.badge-pill {
  border-radius: var(--radius-full);
}

.badge-outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* Notification Dot */
.badge-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-primary);
}

.badge-dot-success { background: var(--success); }
.badge-dot-warning { background: var(--warning); }
.badge-dot-error { background: var(--error); }

/* Count Badge */
.badge-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  background: var(--error);
  color: white;
  font-size: var(--text-2xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Removable Tag */
.badge-tag {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.badge-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin-left: var(--space-1);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-ease-out);
}

.badge-remove:hover {
  color: var(--error);
  background: var(--error-subtle);
}

Accessibility

  • Color alone: Don't rely solely on color - include text or icons for meaning
  • Contrast: All badge text meets WCAG AA contrast requirements
  • Interactive badges: Use button elements with proper aria-label
  • Screen readers: Notification counts should announce context ("12 notifications")
  • Removable tags: Remove buttons need clear aria-label stating what will be removed

Usage Guidelines

✓ Do

  • Keep badge text short (1-2 words)
  • Use semantic colors for status
  • Include icons for quick recognition
  • Position notification badges consistently

✗ Don't

  • Use badges for long text content
  • Overload interfaces with too many badges
  • Use similar colors for different meanings
  • Place badges where they obstruct content