Code

Props

Props	Data Type	Required
className	string	❌
children	Avatar Component	✅
visibleUsers	number	❌

With visibleUsers prop, developers can control how many users to show in the component. By default, the amount of users to show is going to be of 10 participants.

Example

<AvatarGroup
  className="avatarGroupExample"
  visibleUsers={10}
>
  <Avatar
    profilePic="https://i.pinimg.com/736x/7c/67/c5/7c67c5576c2fbbf9791ac04436fb0aa2.jpg"
    tooltip
  >
    Armando Cierra
  </Avatar>
  
  <Avatar tooltip>
    Josh Sanders
  </Avatar>
  
  <Avatar
    profilePic="https://static.wikia.nocookie.net/fightclub/images/d/d3/Tyler-Durden.jpg"
    tooltip
  >
</AvatarGroup>

Components Dependency

For this component elaboration, the following internal components were used:

• Avatar

• Telicon

• Tooltip

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.

React

General Components / Avatar Group - Avatar Group ⋅ Storybooksipster-react-component-storybook.netlify.app