Irozon Design System — design foundations, tokens and components by Irozon AB.
Irozon — Design System
Irozon Design System · v1.0
Components / Badges & Status

A badge decorates metadata. A status reports a state.

Badges & Status v1 is Irozon's fourth canonical component family — packages/design-system/src/components/badge.css. Two related shapes, kept deliberately separate in markup: .iz-badge for compact metadata/category/count, .iz-status for a meaningful operational state. They can look similar; they're answering different questions.

.iz-badge
Metadata — "Beta", "New", "Admin", a count. Usually neutral; color is the exception.
.iz-status
Operational state — "Running", "Completed", "Failed". Always carries one semantic role, optionally an indicator dot.
Badges

Quiet by default.

No attribute needed for the common case — a category label or a count sits neutral unless there's a real reason to color it.

Beta Neutral — no attribute
Admin Category label
AI Feature tag
12 Count — tabular numerals 
<span class="iz-badge">Beta</span>
<span class="iz-badge">12</span>
Semantic roles

Four roles. No arbitrary palette.

neutral / success / warning / error — the same four tokens already canonical on the Status Colors page. No Blue, no Purple, no new brand color introduced for this component.

Neutral data-variant="neutral"
Active data-variant="success"
Attention data-variant="warning"
Failed data-variant="error"
Neutral
Active
Attention
Failed

Products map their own states onto these roles

The design system defines four visual roles, not a dictionary of every workflow state a future product might need:

  • Running → success (or neutral, if "in progress" isn't yet a good outcome)
  • Completed → success
  • Pending → neutral
  • Paused → neutral or warning, depending on why it's paused
  • Needs review → warning
  • Failed → error
Status

The same roles, with a precise indicator.

.iz-status adds an optional .iz-status__indicator dot — small, decorative (aria-hidden), never the only signal. The visible text carries the state; the dot just helps a dense table scan faster.

Pending Neutral
Completed Success
Needs review Warning
Failed Error
Job Status Tags
Nightly export Running AI
Invoice #4471 Needs review 12
Webhook sync Failed Beta
Live states

Motion only when it means something.

data-live="true" is opt-in, reserved for the one state that's genuinely in progress right now — never applied by default, never on more than one row at a time in the same view. A restrained opacity pulse on the dot only; no scale, no glow, no bounce. prefers-reduced-motion: reduce removes it entirely — the word "Running" already says everything the pulse does.

Running data-live="true" · role="status"
Completed Static — the default
Usage

Do / Don't.

Do
Always keep visible text — never a color- or dot-only signal · map your product's states onto the four semantic roles · keep the label to one or two words · reserve strong color for a state that's actually meaningful.
Don't
Invent a new color for a state that already fits an existing role · use a badge as page decoration · pulse every "active" row in a list · rely on color alone to distinguish states · put a full sentence inside a badge.
Accessibility

Text first. ARIA only when it earns its place.

Static badges/status
No special ARIA needed — the visible text already communicates the state to everyone, including assistive tech.
Dynamic status
role="status" only on a status whose value actually changes while the page is open and should be announced — not on every static badge on the page.
Indicator dot
.iz-status__indicator is always aria-hidden="true" — it's a scanability aid, never the state's only carrier.
Color
Every variant pairs a tinted surface with visible text — never a bare color swatch standing in for a label.
Reduced motion
The live pulse is removed entirely under prefers-reduced-motion: reduce; the state remains fully legible without it.