Avatar Group

Props

NameTypeDescription
children
arrayOfAn iterable set of children Avatar components

Grouped Avatars

<AvatarGroup> <Avatar initials="GX" resourceHash="george@example.com" /> <Avatar initials="SJ" resourceHash="susil@example.com" /> <Avatar initials="ML" resourceHash="mary@example.com" /> </AvatarGroup>

Grouped avatars with an overflow

By default, only five avatars should be displayed. The total number of remaining avatars that are not shown is shown in a chip next to the avatars.
1
<AvatarGroup> <Avatar initials="AP" src="https://randomuser.me/api/portraits/women/21.jpg" /> <Avatar initials="AP" src="https://randomuser.me/api/portraits/women/21.jpg" /> <Avatar initials="AP" src="https://randomuser.me/api/portraits/women/21.jpg" /> <Avatar initials="AP" src="https://randomuser.me/api/portraits/women/21.jpg" /> <Avatar initials="AP" src="https://randomuser.me/api/portraits/women/21.jpg" /> <Avatar initials="AP" src="https://randomuser.me/api/portraits/women/21.jpg" /> </AvatarGroup>