1. Docs
2. Components
3. Live dot

Live dot

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.

Basic

<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

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>

Accessibility

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