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.
With the imageFitType property, the avatar can fit images in two ways: Cover and Contain. The default value of the property is Cover.
Fallback Behavior for Missing Images
If the image source path provided for the avatar leads to a non-existent image, the fallback mechanism is as follows:
- If initials are provided, the avatar displays initials.
- If no initials are provided, the avatar displays a default icon. You can choose which icon from the SAP icon font is displayed (property: fallbackIcon).
- 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.
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.