The avatar is a control that has various display options for representing images, icons, and initials.
Use the avatar if:
- You want to display an image in a circular shape.
- You want to use predefined sizes.
- You want to display icons or initials.
- You want to have placeholder images in case no image is provided.
Do not use the avatar if:
The avatar control can be set to a circular or square shape.
The control can show images, icons, or initials.
The control can only display up to 2 Latin letters. If more or non-Latin letters are present, a placeholder will be shown.
If there is no image, icon, or initials provided, the avatar will show a default placeholder. There are two types of placeholders that can be shown. If the avatar is circular, a person icon will be shown. If the avatar is square, a product icon will be shown.
- Use the circular shape to display images of a person or contact.
- Use the square shape to display images of a product, logo, and so on.
- If you need to define a size different from the predefined one, make sure that the font size is consistent with the size of the control itself.
- If you use initials or icons and want to display a custom size for the avatar that is between two predefined sizes, use the predefined font size for the smaller one. For example, if your avatar is 5.5 rem, between sizes L and XL, then you should use the font size for size L: 2 rem.
- For accessibility reasons, provide each image in the avatar with an alternative text in case the image is not available or cannot be displayed.
- High-resolution images that are unnecessarily large in file size can drastically slow down page speed. Optimize your images in this case.