Badges & Status

Status Badges

Badges communicate the status of an element through color coding.

Successful Warning Error Information

Badge	Preview	Background	Text color	Use case
Success	Active	#DCFCE7	#15803D	Successful, confirmed
Warning	Pending	#FEF9C3	#A16207	Warning, in progress
Error	Critical	#FEE2E2	#B91C1C	Error, rejected
Info	Default	#DBEAFE	#1D4ED8	Information, neutral

CSS

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.badge-success { background: #DCFCE7; color: #15803D; }
.badge-warning { background: #FEF9C3; color: #A16207; }
.badge-error   { background: #FEE2E2; color: #B91C1C; }
.badge-info    { background: #DBEAFE; color: #1D4ED8; }

With Dot Indicator

.badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

Usage Rules

1. One badge per element — no multiple statuses at the same time
2. Short labels — maximum 2 words
3. Consistent usage — same meaning = same color
4. Not as buttons — badges are informational, not interactive