Realtime collab · 01

Presence avatar stack

Stacked avatars of currently-online collaborators on a doc, with a tone-coded ring per presence status and an overflow chip when the active-user count exceeds the visible max.

Production answer

Presence avatar stack is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Presence avatar stack states
Generative search brief

Presence avatar stack: Stacked avatars of currently-online collaborators on a doc, with a tone-coded ring per presence status and an overflow chip when the active-user count exceeds the visible max.

Live on Quote #Q-1408 · default size
5 collaborators online: Marcus Halverson, Sophie Tan, Jordan Pace, Bec Lawson, Daniel Fleuren+1
Status ring tones · large
4 collaborators online: Marcus Halverson, Sophie Tan, Jordan Pace, Daniel Fleuren
Compact stack with overflow chip
7 collaborators online: Marcus Halverson, Sophie Tan, Jordan Pace, Bec Lawson, Daniel Fleuren, Priya N., Bec L.+4
Behaviour

Stack is a single role="group" with an aria-live offscreen summary listing every online name. Hovering raises the slot with a translateY for clarity. Each avatar slot encodes presence via a tone ring rather than relying on a dot, so the stack keeps its compact rhythm even at the smallest size.