Avatar

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

Basic Avatar

<ui5-avatar image="../../../assets/images/avatars/man_avatar_1.png" ></ui5-avatar>
<ui5-avatar image="../../../assets/images/avatars/woman_avatar_4.png"></ui5-avatar>
<ui5-avatar image="../../../assets/images/avatars/woman_avatar_5.png" shape="Square"></ui5-avatar>
<ui5-avatar image="../../../assets/images/avatars/man_avatar_3.png" shape="Square"></ui5-avatar>>
	

Avatar Shapes

<ui5-avatar image="../../../assets/images/avatars/woman_avatar_3.png" shape="Circle"></ui5-avatar>
<ui5-avatar image="../../../assets/images/avatars/woman_avatar_4.png" shape="Square"></ui5-avatar>
	

Avatar Sizes

<ui5-avatar image="../../../assets/images/avatars/woman_avatar_3.png" size="XS"></ui5-avatar>
<ui5-avatar image="../../../assets/images/avatars/woman_avatar_4.png" size="S"></ui5-avatar>
<ui5-avatar image="../../../assets/images/avatars/woman_avatar_5.png" size="M"></ui5-avatar>
<ui5-avatar image="../../../assets/images/avatars/man_avatar_1.png" size="L"></ui5-avatar>
<ui5-avatar image="../../../assets/images/avatars/man_avatar_3.png" size="XL"></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" background-color="Accent1" size="XS"></ui5-avatar>
	<ui5-avatar initials="S" background-color="Accent2" size="S"></ui5-avatar>
	<ui5-avatar initials="M" background-color="Accent3" size="M"></ui5-avatar>
	<ui5-avatar initials="L" background-color="Accent4" size="L"></ui5-avatar>
	<ui5-avatar initials="XL" background-color="Accent5" size="XL"></ui5-avatar>

Avatar imageFitType: Contain and Cover

<ui5-avatar image=".../../../assets/images/avatars/Lamp_avatar_01.jpg" shape="Square" size="XL"></ui5-avatar>
<ui5-avatar image="../../../assets/images/avatars/Lamp_avatar_01.jpg" image-fit-type="Contain"  shape="Square" size="XL"></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.

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 ui5-avatar. If not provided a default text alternative will be set, if present.
since v1.0.0-rc.7
backgroundColor
background-color
string
"Accent6"
Defines the background color of the desired image.

Available options are:
  • Accent1
  • Accent2
  • Accent3
  • Accent4
  • Accent5
  • Accent6
  • Accent7
  • Accent8
  • Accent9
  • Accent10
  • Placeholder
    • <<<<<<< HEAD
icon
string
""
Defines the name of the UI5 Icon, that would be displayed.
Note: If image is set, 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-src="employee">
See all the available icons in the Icon Explorer.
image
string
""
Defines the source path to the desired image.
imageFitType
image-fit-type
AvatarFitType
"Cover"
Defines the fit type of the desired image.

Available options are:
  • Cover
  • Contain
initials
string
""
Defines the displayed initials.
Up to two Latin letters can be displayed as initials in a ui5-avatar.
shape
AvatarShape
"Circle"
Defines the shape of the ui5-avatar.

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

Available options are:
  • XS
  • S
  • M
  • L
  • XL
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel