Project Apollo
8 collaborators
Click the +4 to spread it. This overlapping row of profile circles is an Avatar Group (classic name: facepile)
Avatar Group
/ AvatarGroup · AvatarGroupCount /
also called facepile, avatar stack, stacked avatars, grouped avatars, avatar pile
“The overlapping circles of profile pictures” are an avatar group: a row of Avatar circles pulled over each other with a negative margin, each wearing a ring in the surface color so the faces never blend together. Microsoft's older Fluent UI still ships the same thing as Facepile, which is why “facepile” is the word you half-remember; Fluent 2 now calls the compact overlapping layout an avatar stack. When there are more people than slots, the last circle stops being a face and becomes an overflow avatar counting the rest (+4), and any member with no photo falls back to their initials.
If you called it…
…you meant a avatar group.
Anatomy — every part, named
- 1Avatar stack (the overlap)
margin-inline-start: -10px“The part where each profile circle sits on top of the next one” is the avatar stack: the overlap itself, made by pulling every avatar after the first back with a negative margin, with z-index deciding which face wins where they cross.
- 2Separation ring
border“The thin background-colored rim that stops the photos blending together” is the separation ring. It is painted in the color of the surface behind the group (Ant Design exposes it as the groupBorderColor token), and it is not a focus ring.
- 3Fallback initials
AvatarFallback“The colored circle with someone's initials when there is no photo” is the fallback. shadcn/ui calls it AvatarFallback and Chakra calls it Avatar.Fallback; it renders when the image is missing or fails to load.
- 4Overflow avatar (+N)
AvatarGroupCount“The last circle that says +4 instead of showing another face” is the overflow avatar. It fills a member slot and counts the people who did not fit, so it is not a badge: MUI generates it from max and total, shadcn/ui ships it as AvatarGroupCount.
Prompt — paste into your agent
Add an Avatar Group using MUI AvatarGroup, with circular member photos overlapping through compact negative spacing, a background-colored separator ring around every avatar, deterministic stacking order, fallback initials for missing images, and a final +N overflow avatar when more people are hidden.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my avatar group (AvatarGroup, negative margin-inline-start, z-index, +N overflow). Rule out: the negative margin applied to the first child too, so the row hangs off its left edge; the surplus computed from the total instead of total minus visible, showing +5 when only four people are hidden; stacking order left to the DOM so the last avatar paints over the first (set z-index explicitly, or reverse the row); the separator ring hardcoded white so it glows in dark mode instead of following the surface behind the group; the ring clipped because the group sits inside an overflow-hidden parent; fallback initials never appearing because a broken image URL leaves an empty <img> in place instead of switching to the fallback. The symptom:
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| Material UI | AvatarGroup | owns the group: max, total, renderSurplus, spacing |
| shadcn/ui | AvatarGroupCount | the +N overflow item |
| CSS | margin-inline-start | a negative value is what makes the circles overlap |
| Chakra UI | stacking | which avatar paints in front of its neighbour |
| Ant Design | Avatar.Group | overflow is max={{ count }}; maxCount is deprecated |
| Fluent UI React v8 | Facepile | Microsoft's legacy symbol; Fluent 2 calls it Avatar group |