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 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 name of the fallback icon, which should be displayed in the following cases: - If the initials are not valid (more than 3 letters, unsupported languages or empty initials). - If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes). - 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 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.
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; }
Defines the optional badge that will be used for visual affordance. Note: While the slot allows for custom badges, to achieve the Fiori design, use the ui5-avatar-badge component.
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.