Status Dot (Presence Indicator)

Use a status dot (presence indicator), like Fluent UI PresenceBadge or Material UI Badge variant="dot" with overlap="circular": a small filled circle overlapping the avatar's lower right edge, with a 2px border in the surface color as a separation ring. Drive the color from one explicit status value (available green, away amber, busy red, offline gray) and put the same meaning in visible text or the row's accessible name, never color alone. For a live state, center a motion-safe animate-ping halo behind the dot and keep the solid core still.

Debug my status dot / presence indicator (PresenceBadge status, Badge variant="dot" overlap="circular", animate-ping halo, separation ring border). Rule out: the dot positioned against the avatar's square box instead of its circle, so it floats off the rounded edge (Material UI needs overlap="circular"); the separation ring drawn with outline or ring utilities in a hardcoded white, so it shows as a pale halo in dark mode instead of matching the surface; animate-ping applied to the dot itself so the whole dot fades out, instead of to a sibling halo behind a solid core; the halo not centered on the dot, or clipped by an overflow-hidden avatar wrapper; the animation ignoring prefers-reduced-motion; status conveyed by color alone with no text or accessible name, so green versus red is invisible to screen readers and color-blind users; role="status" put on a persistent dot so assistive tech announces every re-render; an unread dot and a presence dot sharing one component and one color, so nobody can tell new content from online; the dot scaling with the avatar until it is too small to see at 24px. The symptom: