AvatarGroup
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​
hiddenItems​
colorScheme​
Slots​
default​
overflowButton​
Events​
click​
overflow​
Methods​
No methods available for this component.
CSS Parts​
No CSS parts available for this component.