Live dot 1.2.2

The <velin-live-dot> Web Component renders a tiny status dot with a concentric pulse animation. Pair it with realtime feeds, websocket counters, or "online" indicators next to user names. Deutsch: Live Punkt

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Presence / live indicators with <velin-live-dot> next to a short label.
When a pulsing dot communicates “online” or “live” without a full badge.

When not

Detailed status messages — use Badge or Alerts.
Loading busy states — use Spinners.

Basic

Realtime feed

Lag detected

Disconnected

Paused

<velin-live-dot status="live">Realtime feed</velin-live-dot>
<velin-live-dot status="warning">Lag detected</velin-live-dot>
<velin-live-dot status="error">Disconnected</velin-live-dot>
<velin-live-dot status="paused" pulse="false">Paused</velin-live-dot>

Attributes

Attribute	Default	Notes
`status`	`live`	`live` / `paused` / `warning` / `error` / `muted`
`pulse`	`true`	`false` disables the looped ring

Styling

The component uses the --velin-live-color custom property to colour the dot. Override per instance:

<velin-live-dot style="--velin-live-color: hotpink">Custom</velin-live-dot>

The label sits in a slot, so it's read by screen readers as plain text alongside the dot (which is aria-hidden).
Pulses respect prefers-reduced-motion: reduce and freeze.