Avatar

v1.0.0-rc.6
@ui5/webcomponents
<ui5-avatar>

Basic Avatar

Woman 1 Woman 4 Woman 5 Man 3
<ui5-avatar>
	<img src="../../../assets/images/avatars/man_avatar_1.png" alt="Woman 1">
</ui5-avatar>
<ui5-avatar>
	<img src="../../../assets/images/avatars/woman_avatar_4.png" alt="Woman 4">
</ui5-avatar>
<ui5-avatar shape="Square">
	<img src="../../../assets/images/avatars/woman_avatar_5.png" alt="Woman 5">
</ui5-avatar>
<ui5-avatar shape="Square">
	<img src="../../../assets/images/avatars/man_avatar_3.png" alt="Man 3">
</ui5-avatar>
	

Avatar Shapes

Woman 3 Woman 4
<ui5-avatar shape="Circle">
	<img src="../../../assets/images/avatars/woman_avatar_3.png" alt="Woman 3">
</ui5-avatar>
<ui5-avatar shape="Square">
	<img src="../../../assets/images/avatars/woman_avatar_4.png" alt="Woman 4">
</ui5-avatar>
	

Avatar Sizes

Woman 3 Woman 4 Woman 5 Man 1 Man 3
<ui5-avatar size="XS">
	<img src="../../../assets/images/avatars/woman_avatar_3.png" alt="Woman 3">
</ui5-avatar>
<ui5-avatar size="S">
	<img src="../../../assets/images/avatars/woman_avatar_4.png" alt="Woman 4">
</ui5-avatar>
<ui5-avatar size="M">
	<img src="../../../assets/images/avatars/woman_avatar_5.png" alt="Woman 5">
</ui5-avatar>
<ui5-avatar size="L">
	<img src="../../../assets/images/avatars/man_avatar_1.png" alt="Man 1">
</ui5-avatar>
<ui5-avatar size="XL">
	<img src="../../../assets/images/avatars/man_avatar_3.png" alt="Man 3">
</ui5-avatar>
	

Avatar with UI5 Icons

<ui5-avatar icon="employee" size="XS"></ui5-avatar>
<ui5-avatar icon="employee" size="S"></ui5-avatar>
<ui5-avatar icon="employee" size="M"></ui5-avatar>
<ui5-avatar icon="employee" size="L"></ui5-avatar>
<ui5-avatar icon="employee" size="XL"></ui5-avatar>
	

Avatar with Initials

<ui5-avatar initials="XS" color-scheme="Accent1" size="XS"></ui5-avatar>
<ui5-avatar initials="S" color-scheme="Accent2" size="S"></ui5-avatar>
<ui5-avatar initials="M" color-scheme="Accent3" size="M"></ui5-avatar>
<ui5-avatar initials="L" color-scheme="Accent4" size="L"></ui5-avatar>
<ui5-avatar initials="XL" color-scheme="Accent5" size="XL"></ui5-avatar>

Avatar object-fit types: Contain and Cover

Lamp Lamp
<ui5-avatar id="myCustomAvatar" shape="Square" size="XL" style="width: 250px; height: 250px; border: 1px solid var(--sapField_BorderColor)">
	<img src="../../../assets/images/avatars/Lamp_avatar_01.jpg" alt="Lamp" style="object-fit: cover">
</ui5-avatar>
<ui5-avatar id="myCustomAvatar1" shape="Square" size="XL" style="width: 250px; height: 250px; border: 1px solid var(--sapField_BorderColor)">
	<img src="../../../assets/images/avatars/Lamp_avatar_01.jpg" alt="Lamp" style="object-fit: contain">
</ui5-avatar>

Overview

An image-like control 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, 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";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
accessibleName
accessible-name
string
""
Defines the text alternative of the component. If not provided a default text alternative will be set, if present.
since v1.0.0-rc.7
colorScheme
color-scheme
AvatarColorScheme
"Accent6"
Defines the background color of the desired image.

Available options are:
  • Accent1
  • Accent2
  • Accent3
  • Accent4
  • Accent5
  • Accent6
  • Accent7
  • Accent8
  • Accent9
  • Accent10
  • Placeholder
icon
string
""
Defines the name of the UI5 Icon, that would be displayed.
Note: If image slot is provided, the property would 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">
See all the available icons in the Icon Explorer.
initials
string
""
Defines the displayed initials.
Up to two Latin letters can be displayed as initials.
interactive
boolean
false
Defines if the avatar is interactive (focusable and pressable)
shape
AvatarShape
"Circle"
Defines the shape of the component.

Available options are:
  • Circle
  • Square
size
AvatarSize
"S"
Defines predefined size of the component.

Available options are:
  • XS
  • S
  • M
  • L
  • XL

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement
Receives 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:

ui5-avatar:not(:defined) {
 visibility: hidden;
}
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel