- For the general display of groups of people, companies and/or brands in a limited space
- In cases where an affordance for adding collaborators is needed
Use the default alternative if no image source is available. This should be the first character of the provided name.
Use alternative icons or graphics.
Use AvatarGroup when representing a group of people and/or organizations.
Use AvatarGroup to represent metaphorical ideas, like multiple Boards or trends. Instead, consider an image or, if there's sufficient space, a Card.
Ensure AvatarGroup have labels describing both the data presented and the call to action in case of icon buttons.
People use Apple’s accessibility features, such as reduced transparency, VoiceOver, and increased text size, to personalize how they interact with their devices. Supporting these personalizations ensures that everyone has a great user experience. See Apple’s Human Interface Guidelines and documentation about accessibility for iOS:
AvatarGroup is available in 4 fixed height sizes, and displays up to 3 user avatars.
- XS (16px)
- SM (24px)
- MD (32px)
- LG (44px)
This size displays up to 3 user avatars + an IconButton if AvatarGroup is interactive and user can add more collaborators. More users, if present, will be displayed as a numerical count.
- Avatar; Opens a new tab
Avatar is the ideal component in cases where only one person or brand needs to be displayed.