CwStatusDot

Status indicator for online, offline, loading and warning states. Colours come from the shared --cw-status-* tokens, so dots match the sensor and location cards. Offline and warning use ring animations and loading pulses; all animation stops when the user prefers reduced motion. Without a visible label the dot is announced as an image with an accessible name.

All statuses

Online Offline Loading Warning

Dot only (accessible name, no visible label)

Sizes

Small Medium Large

Animated states

Offline (pulsing) Warning (ring)
CwStatusDot example Copy code 
<CwStatusDot status="online" showLabel />
<CwStatusDot status="offline" showLabel />
<CwStatusDot status="loading" showLabel />
<CwStatusDot status="warning" showLabel />

<!-- Offline status is animated (CSS pulse) -->
<CwStatusDot status="offline" size="lg" label="Offline (pulsing)" showLabel />
API

Usage and API reference

CwStatusDot is the smallest status indicator in the library. Use it when you need a quick semantic state without the weight of a full badge or chip.

How to think about it

  1. Pick the semantic status `online`, `offline`, `loading`, and `warning` each have distinct color and animation treatment.
  2. Show the label only when context is missing In dense tables you can often keep the dot only. In settings pages or cards, `showLabel` improves clarity.
  3. Use a custom label when domain terms matter The status color stays semantic while the text can say things like "Sensor stale" or "Gateway silent".

Props and callbacks

APITypeDetails
status

Default: offline

'online' | 'offline' | 'loading' | 'warning'Semantic state to display.
size

Default: md

'sm' | 'md' | 'lg'Dot size preset.
label
stringOptional custom text label.
showLabel

Default: false

booleanShows the text label next to the dot.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Common status states

The built-in text labels are enough for most dashboards.

Common status states Copy code 
<CwStatusDot status="online" showLabel />
<CwStatusDot status="offline" showLabel />
<CwStatusDot status="loading" showLabel />
<CwStatusDot status="warning" showLabel />
Custom label and size

Use a custom label when the domain language matters more than the generic status name.

Custom label and size Copy code 
<CwStatusDot
	status="warning"
	size="lg"
	label="Sensor stale"
	showLabel
/>