Avatar group
An avatar group displays a number of avatars grouped together in a stack or grid.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { AvatarGroup } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| data * | readonly AvatarProps[] | — | The people, in a meaningful order. Each entry takes the same props as a single avatar. |
| maxCount | number | 5 | How many to show before the rest become a count. Keep it low in a dense row. |
| appearance | 'stack' | 'grid' | 'stack' | Stack overlaps them for a tight space. Grid lays them out when the set itself is the content. |
| onMoreClick | () => void | — | Called when the overflow count is chosen, usually to open the full list. |
Accessibility
What the component does for you, and what it needs from you.
- Each avatar keeps its own name, so the group is read as a list of people rather than as one image.
- The overflow count is a real button when it does something, and names how many are hidden.
- The full list has to be reachable somewhere, because a stack is not a way to read names.