Badge

Badge Types

<span class="badge primary">Primary</span>
				<span class="badge secondary">Secondary</span>
				<span class="badge success">Success</span>
				<span class="badge error">Error</span>
				<span class="badge warning">Warning</span>
				<span class="badge info">Info</span>

Usage Examples

<!-- Status indicator -->
				Status: <span class="badge success">Active</span>

				<!-- Counter -->
				Notifications <span class="badge error">5</span>

				<!-- Label -->
				<span class="badge info">New Feature</span>

Markup

<span class="badge success">Label Text</span>

				<!-- In text context -->
				Status: <span class="badge primary">Active</span>

				<!-- Multiple badges -->
				<span class="badge success">Approved</span>
				<span class="badge info">v2.1</span>

Variants

Use `data-variant` attribute for different badge types:

• `data-variant="primary"` - Primary badge (blue)
• `data-variant="secondary"` - Secondary badge (gray)
• `data-variant="success"` - Success badge (green)
• `data-variant="error"` - Error badge (red)
• `data-variant="warning"` - Warning badge (orange)
• `data-variant="info"` - Info badge (blue)

Key Features

• Semantic Element - Uses `` for inline content
• Single Class - Only `.badge` class
• Data Variants - `data-variant` for styling
• Design Tokens - Colors from token system
• No Classes - No `.badge-primary`, `.badge-danger`, etc.
• Inline Display - Works naturally in text flow

Use Cases

• Status Indicators - Active, Inactive, Pending
• Labels - Category tags, feature labels
• Counters - Notification counts, message indicators
• Version Labels - v1.0, v2.1, Beta
• Priority Levels - High, Medium, Low
• Approval States - Approved, Rejected, Pending

Accessibility

• Use semantic `` element
• Keep text short and descriptive
• Use `data-variant` for context (status badges)
• Don't rely on color alone - include text
• Sufficient color contrast (WCAG AA)
• Include context in surrounding text

Responsive Behavior

Badge components scale appropriately across devices:

Mobile (< 768px)

On mobile, badges display inline:

• Compact sizing maintained
• Text wraps if needed
• Readable at small sizes
• Color contrast maintained

Desktop (1024px+)

Desktop displays use full sizing:

• Larger padding for visual weight
• Inline or block display
• Can be used in multiple contexts

Framework Integration

Badges use semantic styling:

• No grid needed - inline or block display
• Responsive sizing from tokens
• Works in cards, tables, lists
• Automatic color contrast at all sizes

Best Practices

• Use short, descriptive text
• Pair with context (status labels with associated content)
• Use appropriate variant for meaning
• Keep badges inline with related content
• Don't use too many badges (visual clutter)
• Use color + text, never color alone
• Test with screen readers