LiveIndicator

Something is happening now, for real: a dot in the studio's colour breathing beside a word.

Example

A 6px dot in bg-studio-deep, breathing with animate-pulse, beside its label in the surface's own colour at 80% (text-current/80, AAA on white), at text-xs. Set it on the surface's own colour, not an already softened one, or the word falls below AAA.

Live

import { LiveIndicator } from "@/components/shared/live-indicator";

<LiveIndicator label="Live" />

Beside a name

The landing's demo chat marks the shop live beside its name, so no one mistakes it for the hero's scripted bubbles.

Demo BarbersLive

import { LiveIndicator } from "@/components/shared/live-indicator";

<span className="flex items-baseline gap-2.5">
  <span className="text-base font-medium">Demo Barbers</span>
  <LiveIndicator label="Live" />
</span>

API reference

Prop	Type	Default	Description
label	string	—	The word beside the dot — “Live”. It carries the meaning; the dot is hidden from assistive tech.
className	string	—	Layout only — a margin, an entrance.

Guidelines

Only for what is genuinely live — a real agent answering now, a call in progress. Never on a recording or a scripted loop.
Always with its word: a dot alone is a colour-only signal. Under prefers-reduced-motion it holds still.