KQ-871 · PRESENCE/DOT

Presence Dot

Four states drawn as four shapes, so colour is never the only signal: online fills, away takes a crescent bite, busy is crossed by a bar, offline is a hollow dimmed ring. The bite and the bar are holes in one SVG mask that scale in on snap, away breathes a slow mirrored ring, and every change rings once from a key rather than a timer. The sentence is frozen at the moment of the change and spoken once by a polite status region.

KQ-871 · PRESENCE/DOT

Ines Moreau

Coldbrook dispatch · yard team

Ines Moreau — online · 0 changes

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/presence-dot

Props

status: "online" | "away" | "busy" | "offline"; default —; The state; drives the shape, the colour, the breath and the ring.
name: string; default —; Whose presence it is; opens the spoken sentence.
label: React.ReactNode; default —; Visible text beside the mark. Omit it and the status word is drawn instead.
detail: string; default —; A quieter trailing clause ("back at 15:30"), spoken with the status.
size: "sm" | "md" | "lg"; default "md"; 8, 10 or 14px marks; the breath and the ring scale with it.
showWord: boolean; default true; Draws the status word beside the mark, so the shape is never alone.
ring: boolean; default true; The one-shot ring on a change; turn it off in dense rosters.
onAnnounce: (sentence: string) => void; default —; Fires from an effect once per frozen sentence, after a change.

Prop	Type	Default	Description
status	"online" \| "away" \| "busy" \| "offline"	—	The state; drives the shape, the colour, the breath and the ring.
name	string	—	Whose presence it is; opens the spoken sentence.
label	React.ReactNode	—	Visible text beside the mark. Omit it and the status word is drawn instead.
detail	string	—	A quieter trailing clause ("back at 15:30"), spoken with the status.
size	"sm" \| "md" \| "lg"	"md"	8, 10 or 14px marks; the breath and the ring scale with it.
showWord	boolean	true	Draws the status word beside the mark, so the shape is never alone.
ring	boolean	true	The one-shot ring on a change; turn it off in dense rosters.
onAnnounce	(sentence: string) => void	—	Fires from an effect once per frozen sentence, after a change.