Status

Status dots, status badges, and grouped status indicators for @bnotk/dsx.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/status.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Classes

Class	Purpose
`.dsx-status`	Inline status label with a colored dot generated by `::before`
`.dsx-status--success` / `--warning` / `--error` / `--info` / `--neutral`	Dot color variants for `.dsx-status`
`.dsx-status-badge`	Pill-shaped status badge
`.dsx-status-badge--success` / `--warning` / `--error` / `--info` / `--neutral`	Badge tone variants
`.dsx-status-cluster`	Inline flex wrapper for multiple status items

Visual behavior

Status dots are 0.5rem circles placed before the label.
Base labels use var(--ds2-font-size-xs) and semibold text.
Badge variants use soft pastel backgrounds with semantic token colors.
Neutral states use the grey palette instead of semantic colors.

Example

<div class="dsx-status-cluster">
  <span class="dsx-status dsx-status--success">Active</span>
  <span class="dsx-status dsx-status--warning">Needs review</span>
  <span class="dsx-status-badge dsx-status-badge--info">Draft</span>
</div>

Accessibility notes

Include visible text next to each dot or provide an accessible name for dot-only indicators.
Do not rely on color alone to communicate meaning.
Use badges or text labels when a status must be read quickly by assistive technologies.