Avatar
Avatar component is used to show a thumbnail representation of an individual or business in the interface. It can be a graphical representation or visual depiction, such as an image, initials, or an icon.
Anchor to avatarpropsAvatarProps
An alternative text description that describe the image for the reader to understand what it is about or identify the user the avatar belongs to.
A unique identifier for the component.
Initials to display in the avatar.
Invoked on load error of provided image.
Invoked when load of provided image completes successfully.
Size of the avatar.
The URL or path to the image.
Initials will be rendered as a fallback if src
is not provided, fails to load or does not load quickly.
Basic Avatar
Preview

Anchor to best-practicesBest Practices
By default, if a user does not provide their first or last name, the avatar component will display a placeholder icon. However, if at least one of the names is provided, the avatar will be replaced with one or two initials representing the user.
There are 4 sizes for the avatar component:
- Base (32x32 px): Use by default.
- Large (39×39 px): Use when the avatar is a focal point, such as a customer details card.
- Extra-large (47x47 px): Use when placing more emphasis on the avatar
- Fill to fit: Use when there is a particular size that does not match any of the three sizes provided. If using images please ensure the resolution meets the size requirements.
Provide alt text for avatars to assist customers using assistive technologies.
Dos
- When using multiple avatars on the same page, maintain a consistent style and size to create a unified visual pattern for users.
Don'ts
- Don't use different size avatars on the same page.
