Badge — Zyna UI

Semantic Variants

Primary Secondary Success Danger Warning Info Neutral

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-neutral">Neutral</span>

Pulse & Outline

Online Critical Syncing Outline Primary

<!-- Pulse — animated expanding ring status dot -->
<span class="badge badge-success badge-pulse">Online</span>
<span class="badge badge-danger badge-pulse">Critical</span>
<span class="badge badge-info badge-pulse">Syncing</span>

<!-- Outline — top + bottom strokes only (no fill) -->
<span class="badge badge-warning badge-outline">Outline</span>
<span class="badge badge-primary badge-outline">Primary</span>

Sizes

Small Default Large

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

Shapes

Slant Bevel Pill Rect

<span class="badge badge-primary badge-slant">Slant</span>
<span class="badge badge-primary badge-bevel">Bevel</span>
<span class="badge badge-primary badge-pill">Pill</span>
<span class="badge badge-primary badge-rect">Rect</span>

CSS Variable API

Variable	Default	Description
--badge-bg	rgba(255,255,255,0.04)	Background tint
--badge-color	rgba(240,235,224,0.55)	Text and dot colour
--badge-glow	none	drop-shadow filter (traces the parallelogram shape)
--badge-scan-color	rgba(255,255,255,0.18)	Periodic scan-sweep highlight colour

Custom Variant

Only four variables to override. The plasma example creates a purple neon badge.

Plasma Pulsing

.badge-plasma {
  --badge-bg:    rgba(139, 0, 255, 0.10);
  --badge-color: #BF5FFF;
  --badge-glow:  drop-shadow(0 0 5px rgba(139,0,255,0.45))
                 drop-shadow(0 0 14px rgba(139,0,255,0.14));
}

When to Use

Use badges for short, scannable metadata: statuses, categories, or counts. They should supplement other content, not stand alone as the only indicator.

✓ Do

Use semantic variants that match the meaning (success = OK, danger = error)
Keep label text 1–2 words maximum
Use .badge-pulse only for live, actively changing statuses (Online, Live, Active)
Pair with cards, table rows, or nav items where status needs quick scanning
Use .badge-outline when the badge is decorative or needs less visual weight

✗ Don't

Don't use more than 2–3 badges in a single compact element
Don't use similar colors for different semantic meanings
Don't write full sentences inside a badge
Don't use .badge-pulse for static or historical data
Don't swap semantic variants based on aesthetics alone