Avatar Group

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

Avatar Group - type "Individual"

John Doe Software Developer
<ui5-popover header-text="Person Card" class="personPopover" style="width: 300px" placement-type="Bottom" prevent-focus-restore>
	...
	<ui5-avatar id="popAvatar"></ui5-avatar>
	...
</ui5-popover>

<ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement-type="Bottom">
	...
	<div class="placeholder" style="display: flex; flex-wrap: wrap;"></div>
	...
</ui5-popover>

<ui5-avatar-group type="Individual" avatar-size="M">
	<ui5-avatar icon="employee"></ui5-avatar>
	<ui5-avatar initials="JD"></ui5-avatar>
	<ui5-avatar image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
	...
</ui5-avatar-group>

<script>
	const avatarGroup = document.querySelector("ui5-avatar-group");
	const peoplePopover = document.querySelector(".peoplePopover");
	const personPopover = document.querySelector(".personPopover");

	function onAvatarClicked(avatarRef) {
		personPopover.openBy(avatarRef);
	}

	function onButtonClicked(targetRef) {
		let html = "";
		const firstHiddenIndex = avatarGroup.items.length - avatarGroup.hiddenItems.length;

		avatarGroup.hiddenItems.forEach((avatar, index) => {
			html += `<ui5-avatar 
						...
						background-color="${avatarGroup.colorScheme[firstHiddenIndex + index]}"
					</ui5-avatar>`;
		});

		placeholder.innerHTML = html;
		peoplePopover.openBy(targetRef);
	}

	avatarGroup.addEventListener("click", function (event) {
		if (event.detail.overflowButtonClicked) {
			onButtonClicked(event.detail.targetRef);
		} else {
			onAvatarClicked(event.detail.targetRef);
		}
	});
</script>
	

Avatar Group - type "Group"

<ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement-type="Bottom">
	...
	<div class="placeholder" style="display: flex; flex-wrap: wrap;"></div>
	...
</ui5-popover>

<ui5-avatar-group type="Group" avatar-size="M">
	<ui5-avatar icon="employee"></ui5-avatar>
	<ui5-avatar initials="JD"></ui5-avatar>
	<ui5-avatar image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
	...
</ui5-avatar-group>

<script>
	const slider = document.querySelector("ui5-slider");

	const avatarGroup = document.querySelector("ui5-avatar-group");
	const peoplePopover = document.querySelector(".peoplePopover");

	function onAvatarGroupClick(targetRef) {
		peoplePopover.openBy(targetRef);
	}

	avatarGroup.addEventListener("click", function (event) {
		onAvatarGroupClick(event.detail.targetRef);
	});
</script>
	

Avatar Group Sizes



<ui5-avatar-group type="Individual" avatar-size="S">
	<ui5-avatar image="../../../assets/images/avatars/man_avatar_1.png" ></ui5-avatar>
	<ui5-avatar initials="JD"></ui5-avatar>
	<ui5-avatar image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
	<ui5-avatar image="../../../assets/images/avatars/man_avatar_3.png"></ui5-avatar>
</ui5-avatar-group>

<br>

<ui5-avatar-group type="Individual" avatar-size="M">
	<ui5-avatar image="../../../assets/images/avatars/man_avatar_1.png" ></ui5-avatar>
	<ui5-avatar initials="JD"></ui5-avatar>
	<ui5-avatar image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
	<ui5-avatar image="../../../assets/images/avatars/man_avatar_3.png"></ui5-avatar>
</ui5-avatar-group>

<br>

<ui5-avatar-group type="Group" avatar-size="L">
	<ui5-avatar image="../../../assets/images/avatars/man_avatar_1.png" ></ui5-avatar>
	<ui5-avatar initials="JD"></ui5-avatar>
	<ui5-avatar image="../../../assets/images/avatars/woman_avatar_5.png"></ui5-avatar>
	<ui5-avatar image="../../../assets/images/avatars/man_avatar_3.png"></ui5-avatar>
</ui5-avatar-group>
	

Overview

Displays a group of avatars arranged horizontally. It is useful to visually showcase a group of related avatars, such as, project team members or employees. The component allows you to display the avatars in different sizes, depending on your use case. The AvatarGroup component has two group types:
  • Group type: The avatars are displayed as partially overlapped on top of each other and the entire group has one click/tap area.
  • Individual type: The avatars are displayed side-by-side and each avatar has its own click/tap area.

Responsive Behavior

When the available space is less than the width required to display all avatars, an overflow visualization appears as a button placed at the end with the same shape and size as the avatars. The visualization displays the number of avatars that have overflowed and are not currently visible.

Usage

Use the AvatarGroup if:
  • You want to display a group of avatars.
  • You want to display several avatars which have something in common.
Do not use the AvatarGroup if:
  • You want to display a single avatar.
  • You want to display a gallery for simple images.
  • You want to use it for other visual content than avatars.

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
avatarSize
avatar-size
AvatarSize
"S"
Defines predefined size of the ui5-avatar.

Available options are:
  • XS
  • S
  • M
  • L
  • XL
colorScheme (readonly)
color-scheme
Array
[0..n]
Returns an array containing the AvatarBackgroundColor values that correspond to the avatars in the ui5-avatar-group.
hiddenItems (readonly)
hidden-items
Array
[0..n]
Returns an array containing the ui5-avatar instances that are currently not displayed due to lack of space.
type
AvatarGroupType
"Group"
Defines the mode of the AvatarGroup.

Available options are:
  • Group
  • Individual

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 [0..n]
Defines the items of the ui5-avatar-group. Use the ui5-avatar component as an item.

Note: The UX guidelines recommends using avatars with "Circle" shape. Moreover, if you use avatars with "Square" shape, there will be visual inconsistency as the built-in overflow action has "Circle" shape.
overflowButton
HTMLElement
Defines the overflow button of ui5-avatar-group. Note: We recommend using the ui5-button component.

Note: If this slot is not used, the ui5-avatar-group will display the built-in overflow button.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
click
Fired when the ui5-avatar-group is activated either with a click/tap or by using the Enter or Space key.
since v1.0.0-rc.11
targetRef
type: HTMLElement
description: The DOM ref of the clicked item.
overflowButtonClicked
type: boolean
description: indicates if the overflow button is clicked
overflow
Fired when the count of visible ui5-avatar elements in the ui5-avatar-group has changed
since v1.0.0-rc.13
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