Skip to contentWolf-Rayet

Avatar group

An avatar group displays a number of avatars grouped together in a stack or grid.

#Stack

Use a stack when space is limited. The count shows how many are not displayed.

AMPSMTSOLF
import { AvatarGroup } from '@wolf-rayet/react';

<AvatarGroup data={TEAM} />

#Maximum count

Use maxCount to decide how many avatars show before the overflow.

AMPSMT
import { AvatarGroup } from '@wolf-rayet/react';

<AvatarGroup data={TEAM} maxCount={3} />

#Grid

Use a grid when there is room to show everyone.

AMPSMTSOLFJKSB
import { AvatarGroup } from '@wolf-rayet/react';

<AvatarGroup data={TEAM} appearance="grid" />