AvatarGroup

<ui5-avatar-group> | Since 1.0.0-rc.11

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.

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.

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.

Keyboard Handling

The component provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation:

type Individual:

• [Tab] - Move focus to the overflow button
• [Left] - Navigate one avatar to the left
• [Right] - Navigate one avatar to the right
• [Home] - Navigate to the first avatar
• [End] - Navigate to the last avatar
• [Space] / [Enter] or [Return] - Trigger ui5-click event

type Group:

• [Tab] - Move focus to the next interactive element after the component
• [Space] / [Enter] or [Return] - Trigger ui5-click event

Basic Sample

Properties

type

Description	Defines the mode of the AvatarGroup.
Type	"Group" | "Individual"
Default	"Group"

accessibilityAttributes

Description	Defines the additional accessibility attributes that will be applied to the component. The following field is supported: - hasPopup: Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by the button. Accepts the following string values: dialog, grid, listbox, menu or tree.
Type	AvatarGroupAccessibilityAttributes
Default
Since	2.0.0

hiddenItems

Description	Returns an array containing the ui5-avatar instances that are currently not displayed due to lack of space.
Type	Array<IAvatarGroupItem>
Default	[]
Readonly	true

colorScheme

Description	Returns an array containing the AvatarColorScheme values that correspond to the avatars in the component.
Type	Array<"Accent1" | "Accent2" | "Accent3" | "Accent4" | "Accent5" | "Accent6" | "Accent7" | "Accent8" | "Accent9" | "Accent10" | "Placeholder">
Default	[]
Readonly	true

Slots

default

Description	Defines the items of the component. 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.
Type	Array<IAvatarGroupItem>

overflowButton

Description	Defines the overflow button of the component. Note: We recommend using the ui5-button component. Note: If this slot is not used, the component will display the built-in overflow button.
Type	Array<IButton>
Since	1.0.0-rc.13

Events

click

Description	Fired when the component is activated either with a click/tap or by using the Enter or Space key.
Type	CustomEvent<AvatarGroupClickEventDetail>
Parameters	targetRef: HTMLElement The DOM ref of the clicked item. overflowButtonClicked: boolean indicates if the overflow button is clicked
Since	1.0.0-rc.11
Bubbles	No
Cancelable	No

overflow

Description	Fired when the count of visible ui5-avatar elements in the component has changed
Type	CustomEvent
Since	1.0.0-rc.13
Bubbles	No
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

More Samples

Types And Sizes

Individual

Grouping