Status Badge Component

Primary States

Main semantic states with distinct color treatments

Neutral Info Success Warning Critical New Recommended

<span class="elv-status-badge elv-status-badge--neutral">Neutral</span>
<span class="elv-status-badge elv-status-badge--info">Info</span>
<span class="elv-status-badge elv-status-badge--success">Success</span>
<span class="elv-status-badge elv-status-badge--warning">Warning</span>
<span class="elv-status-badge elv-status-badge--critical">Critical</span>
<span class="elv-status-badge elv-status-badge--new">New</span>
<span class="elv-status-badge elv-status-badge--brand">Recommended</span>

Dot Indicator States

Status indicators with color-coded dots for active/inactive states

Active Inactive Pending Unassigned

<span class="elv-status-badge elv-status-badge--neutral">
  <span class="elv-status-badge__dot elv-status-badge__dot--active"></span>
  Active
</span>

Usage Examples

Common real-world applications

Published Draft Archived Beta In Review Featured

In Context

Examples of badges in typical UI contexts

Project Alpha

Active

Updated 2 hours ago

Integration Service

Pending

Waiting for approval

API v2.0

New

Released today

Accessibility Notes

Semantic Meaning: Always pair color with text—never rely on color alone
ARIA Labels: Use aria-label or role="status" for dynamic badges
Contrast: All color combinations meet WCAG AA standards
Non-interactive: Badges are display-only, not clickable

Design System Specs

Border Radius	8px (radius-sm)
Border	1px solid (color varies by state)
Padding	2px 4px (vertical / horizontal)
Font	Label Sm (14px / 500)
Height	max-height: 24px
States	12 total (7 semantic + 4 dot variants + recommended)
Display	inline-flex, items-center, width: fit-content