Avatar
A visual representation of a user.The <Avatar /> component is used to visually represent a user in your application.
Below are the three variants that can be rendered depending on what prop values have been provided to the component.
- Placeholder - Used when no data has been submitted for a user.
- Initials - Used when we know at least one of the user's names and an image has not been uploaded or is not working. The first name and last name initial is used for all sizes except for the xsmall size where it will only show the first name initial.
- Image - Used when the user has uploaded a working image to the application. Try updating the src prop in the code example below with an invalid image path/url.
Avatars are available in all sizes using the available size prop tokens below.
- xlarge - Used when a page or component is primarily centred around a single user, e.g. on a user profile page.
- large - Used when a page or component contains a lot of elements and the avatar needs visual prominence.
- medium - Used primarily within components when surrounding UI elements harmonise with it proportionally. Commonly used in dropdowns, tables, lists or tight UI compositions.
- small - When the medium size is too large, this size can be used in its place. Commonly used in dropdowns, tables, lists or tight UI compositions.
- xsmall - When the small size is too large, this size can be used in its place. Commonly used in dropdowns, tables, lists or tight UI compositions. The xsmall size will only ever display the first initial due to the limited space available.
Avatars can be disabled to indicate that a user or entity is unavailable due to insufficient setup or deactivation within the application.
Use the <AvatarGroup/> component when you need to stack multiple avatars next to each other. You can control both the spacing between avatars and the avatar size with the size prop.
The <AvatarGroup/> also supports the responsive prop syntax being passed to the size prop. This allows control over the avatar sizes across different device widths.
You can control all overflowing avatars using the cap prop. In this example, there are a total of 10 users with a cap of 5 being set. The 5 remaining users are subsequently hidden with the overflow element.
When the +n count exceeds the available space in its surrounding circle, an ellipsis (...) will be used instead of a number.
- For avatar sizes xsmall and small, the ellipsis will be visible when the remaining +n count exceeds 9.
- For avatar sizes medium, large and xlarge, the ellipsis will be visible when the remaining +n count exceeds 999.