Defines the additional accessibility attributes that will be applied to the component. The following field is supported: - hasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values: dialog, grid, listbox, menu or tree.
Defines the name of the fallback icon, which should be displayed in the following cases: - If the initials are not valid (more than 3 letters or empty initials). - If the initials do not fit in the shape at the current size (e.g. WWW at size XS). - If the image src is wrong. Note: If not set, a default fallback icon "employee" is displayed. Note: You should import the desired icon first, then use its name as "fallback-icon". import "@ui5/webcomponents-icons/dist/{icon_name}.js" <ui5-avatar fallback-icon="alert"> See all the available icons in the Icon Explorer.
Defines the name of the UI5 Icon, that will be displayed. Note: If image slot is provided, the property will be ignored. Note: You should import the desired icon first, then use its name as "icon". import "@ui5/webcomponents-icons/dist/{icon_name}.js" <ui5-avatar icon="employee"> Note: If no icon or an empty one is provided, by default the "employee" icon should be displayed. See all the available icons in the Icon Explorer.
Defines the displayed initials. Up to three letters from an alphabetic script can be displayed as initials. All scripts used in SAP-supported languages are accepted, except logographic and pure syllabic scripts where the concept of initials does not apply: Han (Chinese, Japanese kanji), Hiragana, and Katakana. Korean (Hangul) is supported. If the letters do not fit inside the avatar shape at the current size, the fallback icon is shown instead.
Defines if the avatar is interactive (focusable and pressable). Note: When set to true, this property takes precedence over the mode property, and the avatar will be rendered as interactive (role="button", focusable) regardless of the mode value. Note: This property won't have effect if the disabled property is set to true.
Type
boolean
Default
false
Deprecated
Set mode="Interactive" instead for the same functionality with proper accessibility.
Defines the mode of the component. Note: - Image (default) - renders with role="img" - Decorative - renders with role="presentation" and aria-hidden="true", making it purely decorative - Interactive - renders with role="button", focusable (tabindex="0"), and supports keyboard interaction Note: This property is ignored when the interactive property is set to true. In that case, the avatar will always be rendered as interactive.
Defines the optional badge that will be used for visual affordance. Recommendation: While badges are supported on all avatars, it is recommended to use them with interactive avatars (via mode="Interactive" or interactive attribute) to provide better user experience and accessibility. Note: While the slot allows for custom badges, to achieve the Fiori design, use the ui5-avatar-badge component.
Receives the desired <img> tag Note: If you experience flickering of the provided image, you can hide the component until it is defined with the following CSS: ui5-avatar:not(:defined) { visibility: hidden; }
mode="Interactive" - Sets the avatar to interactive mode with role="button", making it focusable and enabling keyboard interaction
interactive property - A boolean property that also makes the avatar interactive
Note: The interactive property takes precedence over the mode property. When interactive=true, the mode property value is ignored, and the avatar behaves as interactive.
The Avatar can be set to decorative mode with mode="Decorative", making it purely visual without semantic content (role="presentation", aria-hidden="true"). This is useful when the avatar is used for visual purposes only and shouldn't be announced by screen readers.
The Avatar supports visual affordance through badges using the ui5-avatar-badge component. Badges can display icons with different value states to indicate status or notifications. It is recommended to use badges with interactive avatars for better user experience and accessibility.
ui5-avatar-badge displays an icon tooltip by default, based on the icon semantic text. To provide a custom tooltip text, set the badge tooltip property.