Status Dot — cinder playground

Overview

A semantic status indicator that pairs a colored dot with an accessible label.

<script lang="ts">
  import StatusDot from '@lostgradient/cinder/status-dot';
</script>

<StatusDot status="online" label="Online" />

The "building" status was renamed to "pending". Update any usage:

<!-- before -->
<StatusDot status="building" label="Deploying" />
<!-- after -->
<StatusDot status="pending" label="Deploying" />

The dot color is unchanged (still info-blue) — only the status token name changed.

Live preview

Use when

Indicating the current state of a list row, user, deployment, or other entity alongside its name.
Communicating status compactly when many indicators appear together without triggering live-region announcements.
Surfacing whether a realtime channel is connected, connecting, disconnected, or errored on a dashboard or app chrome.
Giving operators an at-a-glance health signal for a long-lived transport.

Avoid when

Counting items or showing a numeric value — use badge instead.
Announcing a transient status change — use toast-region or alert so assistive tech reads it.

Visible label toggle and sm vs md sizes.

All eight semantic status values.

Props for status-dot
Name	Type	Default	Description
`status`	`'online'\|'offline'\|'warning'\|'danger'\|'pending'\|'neutral'\|'success'\|'accent'`		Semantic status. Drives color via `data-cinder-status`; defaults to a neutral dot or derives from `connectionState`.
`connectionState`	`'connected' \| 'connecting' \| 'disconnected' \| 'error'`		Realtime connection preset. Sets status, default label, and live-region semantics.
`label`	`text`		Optional human label. Rendered visibly when `labelVisible` is true; used as the accessible name either way.
`live`	`boolean`		Use role="status" with polite live-region attributes. Defaults true when connectionState is provided.
`labelVisible`	`boolean`	`true`	Whether to render the visible label. Default `true`.
`size`	`'sm' \| 'md'`	`'md'`	Dot size. Default `'md'`.