In a design system's avatar group, how should a stack of project members' avatars behave when there are more people than fit?

## The component An **avatar group** (often called an avatar stack) shows several people in a compact row. On a freelance job marketplace it appears on a contract card to show the freelancers working on it, or on a proposal to show who has reviewed it. Avatars overlap by a fraction of their width, and beyond a maximum the rest collapse into an **overflow indicator**. The group reuses the single avatar's fallback chain; what it adds is the rules for many. ## The overflow rules 1. **Maximum visible is a spec parameter**, commonly three to five, and it is chosen from the space the container gives the group, not from the data. 2. **The overflow indicator takes the last slot.** It has the same size, shape and ring as an avatar so the row keeps its rhythm, and shows `+N`. 3. **N is the number of hidden people, not the total.** With 9 members and a maximum of 4 slots, the group shows 3 avatars and `+6`. Showing "+9" — the total — is a classic defect that makes people count faces and get a different sum. 4. **No "+1".** Because the indicator replaces a slot rather than being added after the last one, collapsing always hides at least two people. A "+1" would mean the counter occupies a slot the hidden face could have filled, saving no space and adding a click. 5. **Cap the counter too.** A group with thousands of members caps the indicator (`+99` is common) for the same reasons a notification badge is capped. 6. **Order is stable and meaningful.** The owner or the current user first, or most recently active — pick one rule, document it, and never reshuffle on refresh. | Members | Slots | Shows | |---|---|---| | 3 | 4 | three avatars, no indicator | | 4 | 4 | four avatars, no indicator | | 5 | 4 | three avatars and +2 | | 9 | 4 | three avatars and +6 | ## Revealing everyone Collapsing people is only acceptable if nobody is lost. The spec picks one of two routes: - **Interactive indicator.** Activating `+6` opens the full member list. The indicator is then a real control, with a name such as "Show all 9 members", and it inherits the system's rules for interactive targets. - **Non-interactive indicator.** The indicator is a summary only, and the full list is reachable through an adjacent link or the detail page. Making individual stacked avatars interactive is rarely worth it: overlapped targets are small and partly covered. ## Overlap and separation - Each avatar gets a **ring in the surface color**, so two adjacent photos — or two initials avatars on similar colors — read as separate people rather than one blob. - **Stacking order** (does the first or the last avatar sit on top?) is a system decision; document it and keep it consistent. - The stack **mirrors in right-to-left layouts**, with the indicator at the reading end. ## The size scale behind the group The group draws on the single avatar's **size scale**, a small set of fixed tiers each tied to where it is used: | Tier | Typical use | Status dot | |---|---|---| | Extra small | dense lists, avatar groups | usually hidden | | Small | comment threads | optional | | Medium | list rows, the default | shown | | Large | profile headers | shown | Each tier defines the initials type size, the ring width, the overlap amount and whether a status dot appears. A group uses **one tier**; mixing sizes breaks the overlap rhythm and implies a hierarchy that is rarely intended. The exact dimensions of each tier are the system's choice; the rule is that they come from the scale, never from a one-off value. ## Text alternative for the group The group conveys *who* and *how many*. Its text alternative names the visible people and the total, such as "Contract team: Amina Diallo, Luis Ortega and 7 others", rather than leaving each overlapped avatar to be read one by one followed by an unexplained "plus six".