Avatar group
An avatar group shows several avatars together in a stack or grid.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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[] | None | The people to show, in an order that makes sense. 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 to save space. Grid lays them out in rows when the people are the main content. |
| onMoreClick | () => void | None | 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 screen readers announce a list of people, not one image.
- When the overflow count does something, it is a real button and says how many people are hidden.
- Make the full list available somewhere. People cannot read names from a stack.