Display

AvatarGroup

Overlapping faces for "these people", with the overflow arithmetic done for you.

AvatarGroup

import { AvatarGroup } from '@anomalia-so/ui';

Notes

It takes people as data rather than as Avatar children so the overflow count cannot disagree with the faces shown — "+3" beside four hidden people is the classic version of this bug.
Each face carries a ring in the surface colour. Without that cutout, overlapping circles smear into one shape; set ring to whatever the stack actually sits on.
The group is labelled with every name, shown or collapsed, so the count never hides people from assistive tech.

Examples

Stack

Faces overlap by a fixed amount and each one carries a ring in the surface colour — without that cutout the circles smear into a single shape. Past `max` the rest become a count, and every name stays in the group's accessible label.

Editing now

Marta

Whole team

5 here

On a sunken surface

API

Prop	Type	Default	Description
`people`	`Person[]`	—	`{ id?, name, avatar? }`.
`max`	`number`	`3`	Faces before the rest become "+n".
`ring`	`string`	`var(--an-surface)`	Cutout colour — match the surface behind.
`label`	`string \| null`	—	Text beside the stack: a first name, or "4 here".

Every component also forwards the native attributes of its root element, plus class, so anything not listed here still works.