Feedback

StatusDot

Colored dot indicator that communicates static entity state or live realtime connection state with an accessible text label.

import { StatusDot } from '@lostgradient/cinder';
connectionfeedbackrealtimestatus
01

Overview

Reference usage

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

Usage

svelte 
<script lang="ts">
  import { StatusDot } from '@lostgradient/cinder';
</script>

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

A status is a dot and a word, never a dot alone. With only status, the component renders a default word derived from it (online renders "Online", danger renders "Danger"), so <StatusDot status="online" /> shows the same dot and word as the example above. Pass label to say something more specific, such as "Healthy" or "Deploying", and pass labelVisible={false} only where the word sits right next to the dot in the surrounding text; the word stays the accessible name either way.

Breaking changes

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

svelte 
<!-- 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

Status dot default word

Online Warning Danger Deploying

02

When to use

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.
03

Examples

Status dot default word

With only a status, a StatusDot renders a word derived from it, so a status is never a dot alone.

Status dot label and size

Visible label toggle and sm vs md sizes.

Status dot statuses

All eight semantic status values.

04

Props

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 Human label. Rendered visibly when labelVisible is true; used as the accessible name either way. Defaults to a word derived from status (for example "Online"), so a bare StatusDot is a dot and a word, never a dot alone.
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.
size 'sm' | 'md' 'md' Dot size. Default 'md'.