Common status states
The built-in text labels are enough for most dashboards.
<CwStatusDot status="online" showLabel />
<CwStatusDot status="offline" showLabel />
<CwStatusDot status="loading" showLabel />
<CwStatusDot status="warning" showLabel />CwStatusDot
Simple status indicator for online, offline, loading, and warning states. Offline and warning statuses include ring animations; loading pulses.
Online Offline Loading Warning
Sizes
Offline pulse
Offline (pulsing)
Warning ring
Warning (ring)
<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 />Documentation Upgrade
Start here
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
- Pick the semantic status `online`, `offline`, `loading`, and `warning` each have distinct color and animation treatment.
- 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.
- 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
| API | Type | Details |
|---|---|---|
status Default: | 'online' | 'offline' | 'loading' | 'warning' | Semantic state to display. |
size Default: | 'sm' | 'md' | 'lg' | Dot size preset. |
label | string | Optional custom text label. |
showLabel Default: | boolean | Shows the text label next to the dot. |
Copy-paste examples
These snippets intentionally show the full public API surface the live demo relies on.
Custom label and size
Use a custom label when the domain language matters more than the generic status name.
<CwStatusDot
status="warning"
size="lg"
label="Sensor stale"
showLabel
/>