Defines if the avatar fires click events. Note: This property only controls event firing behavior. It does not affect the component's accessibility attributes. To make the avatar interactive with proper accessibility (role="button", focusable), use mode="Interactive" instead. Note: This property won't have effect if the disabled property is set to true.
Type
boolean
Default
false
Deprecated
Since version 2.19. Use the mode property with value Interactive instead. For accessibility and visual affordance (role="button", focusable), set mode="Interactive". This property now only controls whether click events are fired.
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
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.
The Avatar can be set to interactive mode with mode="Interactive", making it focusable with role="button" and enabling keyboard interaction. This is the recommended way to make an avatar 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.