UI5 Web Components
Search

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>

Avatar with Visual Affordance

Woman 3 Woman 4 1 
<ui5-avatar shape="Circle">
	<img src="../../../assets/images/avatars/woman_avatar_3.png" alt="Woman 3">
	<ui5-badge slot="badge">
		<ui5-icon slot="icon" name="filter"></ui5-icon>
	</ui5-badge>
</ui5-avatar>
<ui5-avatar initials="AB" size="L" shape="Circle">
	<ui5-badge slot="badge">
		<ui5-icon slot="icon" name="document"></ui5-icon>
	</ui5-badge>
</ui5-avatar>
<ui5-avatar shape="Square">
	<img src="../../../assets/images/avatars/woman_avatar_4.png" alt="Woman 4">
	<ui5-badge slot="badge">
		<ui5-icon slot="icon" name="accept"></ui5-icon>
	</ui5-badge>
</ui5-avatar>
<ui5-avatar initials="CD" size="L" shape="Square">
	<ui5-badge slot="badge">
		<ui5-icon slot="icon" name="employee"></ui5-icon>
	</ui5-badge>
</ui5-avatar>
<ui5-avatar initials="AB" color-scheme="Accent1">
	<span slot="badge" class="custom-badge">1</span>
</ui5-avatar>

Overview

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, 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 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">
See all the available icons in the Icon Explorer.
initials
string
""
Defines the displayed initials.
Up to three 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
badge
HTMLElement
Defines 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.

Example:

<ui5-avatar>
    <ui5-badge slot="badge">
        <ui5-icon slot="icon" name="employee"></ui5-icon>
    </ui5-badge>
</ui5-avatar>

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: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel