Usage guidelines
- 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
- To reflect a single person, company or brand within the product. Use Avatar instead
Best practices
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.
Accessibility
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:
Accessible design on iOS
Accessible development on iOS
Design tokens
Anatomy
Variants
Sizes
AvatarGroup is available in 4 fixed height sizes, and displays up to 3 user avatars.
- XS (16px)
- SM (24px)
- MD (32px)
- LG (44px)
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.
Related
- Avatar; Opens a new tab
Avatar is the ideal component in cases where only one person or brand needs to be displayed.