Components / Status Dot
Status Dot
Small colored dot indicating status/presence, with an optional pulse animation and accessible label. Maps status to a tier-2 semantic color.
data-displayv0.8.0
Playground
Examples
Presence states
<cg-stack direction="row" gap="md"><cg-status-dot status="online" label="Online"></cg-status-dot><cg-status-dot status="away" label="Away"></cg-status-dot><cg-status-dot status="busy" label="Busy"></cg-status-dot><cg-status-dot status="offline" label="Offline"></cg-status-dot></cg-stack>With pulse
<cg-stack direction="row" gap="sm" align="center"><cg-status-dot status="online" pulse></cg-status-dot><cg-text>Live</cg-text></cg-stack>Sizes
<cg-stack direction="row" gap="md" align="center"><cg-status-dot status="success" size="sm"></cg-status-dot><cg-status-dot status="success" size="md"></cg-status-dot><cg-status-dot status="success" size="lg"></cg-status-dot></cg-stack>Import
import { CgStatusDot } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-status-dot';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
status | "online" | "away" | "busy" | "offline" | "success" | "warning" | "error" | "info" | "neutral" | "neutral" | Status → semantic color |
size | "sm" | "md" | "lg" | "md" | Dot diameter |
pulse | boolean | false | Animated pulse ring (respects reduced motion) |
label | string | "" | Accessible label; when empty the dot is aria-hidden |