Avatar
Avatar is used to represent a user. Every Avatar image has a subtle color wash.
Props
Usage guidelines
- To reflect a person, company or brand within the product.
- To represent a group of people, companies and/or brands. Use AvatarGroup instead.
Best Practices
Use the default alternative if no image source is available. This will be the first character of the provided name.
Use alternative graphics or icons
Scale or change the shape of Avatar. Instead use the designated Avatar sizes and style.
Use Avatar to represent metaphorical ideas, like a Board. Instead, consider an icon or the appropriate interactive component.
Use the collaborator’s name nearby or in an alternative view if possible.
Place elements like washes, text or icons over Avatars.
Accessibility
The avatar should have a text equivalent. Use the accessibilityLabel prop to ensure there is a text description for the image. The VoiceOver description will default to the name prop if accessibilityLabel is not provided.
Make sure that the alternative text properly describes the information and function of the avatar image(s). Depending on the situation, it may be helpful to state the collaborator or company name and/or their verification status.
Localization
Be sure to localize any content in the accessibilityLabel that isn’t a name.
Variants
Fixed sizes
There are 5 sizes available for Avatar. For certain designs you may need a container-based size.
Container-based sizes
Avatars without a size prop will expand to fit the width of their parent container. A common use case is to achieve column-based sizing.
Resize the browser to see these Avatar change to match the width of the Column they have been placed in.
Without an image
If there is no image source provided to the Avatar, the first character of
the name provided will be used as a placeholder.
Verified
For users with verified accounts, use the verified prop to add a checkmark. Be sure to update the accessibilityLabel to include this information as well.
Related
AvatarGroup
AvatarGroup is the ideal component in cases where multiple people/brands need to be displayed.
AvatarPair
AvatarPair is the ideal solution when you wish to communicate a group of people/brands (ideally two) laid out in a square format.