Badge

Badges are small status indicators that highlight information or draw attention to specific elements.

Usage

Use badges to label, categorize, or indicate status. Common uses include notification counts, status labels, and category tags.

Variants

PrimarySecondarySuccessWarningErrorNeutral

<span class="df-badge df-badge--primary">Primary</span>
<span class="df-badge df-badge--secondary">Secondary</span>
<span class="df-badge df-badge--success">Success</span>
<span class="df-badge df-badge--warning">Warning</span>
<span class="df-badge df-badge--error">Error</span>
<span class="df-badge df-badge--neutral">Neutral</span>

Outline Variants

PrimarySecondarySuccessWarningError

<span class="df-badge df-badge--primary-outline">Primary</span>
<span class="df-badge df-badge--success-outline">Success</span>

Sizes

SmallMediumLarge

<span class="df-badge df-badge--primary df-badge--sm">Small</span>
<span class="df-badge df-badge--primary">Medium</span>
<span class="df-badge df-badge--primary df-badge--lg">Large</span>

With Icon

Verified Pending Failed

<span class="df-badge df-badge--success">
  <svg><!-- check icon --></svg>
  Verified
</span>

Dot Indicator

OnlineAwayOffline

<span class="df-badge df-badge--success df-badge--dot">Online</span>

Notification Badge

3

99+

<div class="notification-wrapper">
  <svg><!-- bell icon --></svg>
  <span class="df-badge df-badge--error df-badge--count">3</span>
</div>

Pill Badge

New FeatureBetaActive

<span class="df-badge df-badge--primary df-badge--pill">New Feature</span>

Removable Badge

JavaScript React

<span class="df-badge df-badge--neutral df-badge--removable">
  JavaScript
  <button class="df-badge__remove" aria-label="Remove">
    <svg><!-- close icon --></svg>
  </button>
</span>

Status Examples

ActiveJohn Doe - john@example.com

PendingJane Smith - jane@example.com

InactiveBob Wilson - bob@example.com

Accessibility

• Use meaningful text that describes the status
• For icon-only badges, include aria-label
• Ensure sufficient color contrast
• Don't rely on color alone to convey meaning

Best Practices

• Keep badge text short (1-2 words)
• Use consistent colors for the same status types
• Position badges consistently throughout the UI
• Consider using icons to reinforce meaning

API Reference

Classes

Class	Description
df-badge	Base badge class
df-badge--primary	Primary color
df-badge--secondary	Secondary color
df-badge--success	Success/green color
df-badge--warning	Warning/yellow color
df-badge--error	Error/red color
df-badge--neutral	Neutral/gray color
df-badge--sm	Small size
df-badge--lg	Large size
df-badge--pill	Pill shape (more rounded)
df-badge--dot	With dot indicator
df-badge--count	Notification count style
df-badge--removable	With remove button