effects

CSS Badge & Pill Components

Status badges, category pills, notification counts, and tag chips in pure CSS.

Badges and pills are small labeling components that appear across nearly every UI — status indicators, category tags, notification counts, and filters. This snippet covers solid badges, outline variants, pill-shaped chips, and animated notification count bubbles, all built without any JavaScript.

Live CSS Editor

CSS

Preview

/* Base badge */
.badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 3px;
  white-space: nowrap;
}

/* Color variants */
.badge-green  { background: rgba(29,158,117,.12); color: #1d9e75; }
.badge-blue   { background: rgba(14,165,233,.12); color: #0284c7; }
.badge-purple { background: rgba(139,92,246,.12); color: #7c3aed; }
.badge-red    { background: rgba(239,68,68,.12);  color: #dc2626; }
.badge-amber  { background: rgba(245,158,11,.12); color: #b45309; }
.badge-gray   { background: rgba(107,114,128,.1); color: #4b5563; }

/* Outline variant */
.badge-outline {
  background: transparent;
  border: 1px solid currentColor;
}

/* Pill shape (fully rounded) */
.pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 100px;
  border: 1px solid currentColor;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.pill:hover {
  background: currentColor;
}

/* Active pill filter */
.pill-active {
  background: #1d9e75;
  color: #fff;
  border-color: #1d9e75;
}

/* Notification count bubble */
.count-badge {
  position: relative;
  display: inline-block;
}

.count-badge::after {
  content: attr(data-count);
  position: absolute;
  top: -6px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

Edit CSS → see live previewTab = 2 spaces

Usage Note

Use data-count attribute with the count-badge::after pattern for notification counts: <button class="count-badge" data-count="3">Inbox</button>. For pill filters, toggle the .pill-active class via JavaScript on click.