Overview & Philosophy
Compact inline label with a colored indicator dot — pure CSS, zero JavaScript. Semantic color variants are powered via --color-primary overrides, featuring smooth pulse animations for live and active operational states.
Semantic Variants
- Active
- Pending
- Blocked
- In Review
- Inactive
- Default
Live State (Pulse Animation)
- Live
- Syncing
- Processing
Actionable Badge (button)
When applied to a <button>, hover and active states activate automatically.
In Context — Table
| User | Role | Status |
|---|---|---|
| Alice Johnson | Admin | Active |
| Bob Smith | Editor | Pending |
| Carol White | Viewer | Inactive |
| Dave Brown | Editor | Blocked |
Production Usage Pattern
In production, avoid class utilities like .success on project-owned elements. Use @include badge on a semantic selector and override --color-primary:
<!-- Library classes (prototyping / design system demos) -->
<ul class="demo-badge-list">
<li class="success">Active</li>
<li class="warning">Pending</li>
<li class="neutral">Inactive</li>
</ul>
<!-- Production pattern — project-owned selectors -->
<ul class="status-list">
<li class="active">Active</li>
<li class="pending">Pending</li>
<li class="inactive">Inactive</li>
</ul>// Project SCSS
.status-list li {
@include badge;
&.active { --color-primary: var(--color-success); }
&.pending { --color-primary: var(--color-warning); }
&.inactive { --color-primary: var(--color-neutral-400); }
}
// Add pulse for real-time states
.status-list li.live { @include badge-live; }- Active
- Pending
- Inactive
Mixin Reference
| Mixin | Description |
|---|---|
@include badge | Base badge: dot + label, pill shape, primary color tint. On <button>: hover/active states automatic. |
@include badge-live | Adds pulsing ring animation to the ::before dot (2s loop). |
Token Reference
| Token | Used for |
|---|---|
--color-primary | Dot color, text color, background tint |
--color-success | .badge.success override |
--color-warning | .badge.warning override |
--color-error | .badge.error override |
--color-info | .badge.info override |
--color-neutral-400 | .badge.neutral override |
--radius-full | Pill border-radius |
--text-xs | Font size |
--font-medium | Font weight |
--transition-fast | Button hover transition |