Skip to main content

Avatar

An image-like component that has different display options for representing images and icons in different shapes and sizes, depending on the use case.

The shape can be circular or square. There are several predefined sizes, as well as an option to set a custom size.

Keyboard Handling​

  • [Space] / [Enter] or [Return] - Fires the click event if the interactive property is set to true.
  • [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.

ES6 Module Import​

import "@ui5/webcomponents/dist/Avatar.js";

Basic Sample​

Properties​

disabled​

DescriptionDefines whether the component is disabled. A disabled component can't be pressed or focused, and it is not in the tab chain.
Typeboolean
Defaultfalse

interactive​

DescriptionDefines if the avatar is interactive (focusable and pressable).
Note: This property won't have effect if the disabled property is set to true.
Typeboolean
Defaultfalse

icon​

DescriptionDefines 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.
Typestring
Default""

fallbackIcon​

DescriptionDefines 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.
Typestring
Default""

initials​

DescriptionDefines the displayed initials.
Up to three Latin letters can be displayed as initials.
Typestring
Default""

shape​

DescriptionDefines the shape of the component.
Type"Circle" | "Square"
Default"Circle"

size​

DescriptionDefines predefined size of the component.
Type"XS" | "S" | "M" | "L" | "XL"
Default"S"

colorScheme​

DescriptionDefines the background color of the desired image.
Type"Accent1" | "Accent2" | "Accent3" | "Accent4" | "Accent5" | "Accent6" | "Accent7" | "Accent8" | "Accent9" | "Accent10" | "Placeholder"
Default"Accent6"

accessibleName​

DescriptionDefines the text alternative of the component. If not provided a default text alternative will be set, if present.
Typestring
Default""
Since1.0.0-rc.7

Slots​

default​

DescriptionReceives the desired <img> tag
Note: If you experience flickering of the provided image, you can hide the component until it is being defined with the following CSS:
TypeArray<HTMLElement>
Since1.0.0-rc.15

badge​

DescriptionDefines the optional badge that will be used for visual affordance.
Note: While the slot allows for custom badges, to achieve the Fiori design, please use ui5-badge with ui5-icon in the corresponding icon slot, without text nodes.
TypeArray<HTMLElement>
Since1.7.0

Events​

No events available for this component.

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.

More Samples​

Shapes​

The Avatar comes in two shapes (Square and Circle).

Sizes​

The Avatar comes in several sizes (S to XL).

Interactive​

The Avatar can be interactive, e.g. responds to hover, focus and press.

Color Schemes​

The Avatar can be dislpayed in multiple color schemes.

With Icon​

The Avatar can show icons.

With Image​

The Avatar can show images.

With Badge​

The Avatar can show badge.

Custom Styling​

The Avatar allows customization with pure CSS on tag level.