Intro
The avatar group is a visual element that displays several avatars together, indicating that more than one person or business entity is associated with an item. It’s typically used to represent a group of people who belong together – for example, members of a project team or department.
Avatar group
Component availability
The avatar group component is available in the following libraries:
When to Use
Use the avatar group to:
- Display a group of at least two people.
- Display several people who share something in common, such as a project or a team.
- Always display avatar groups horizontally.
- Use the group type when it’s more important to show the avatar group as a whole.
- Use the individual type when users need to focus on each person in the avatar group.
- Use the avatar group to display at least two avatars.
- Use size S by default for most layouts. Use sizes M or L only when avatars are key to the page.
Anatomy
The avatar group component consists of the following elements:
- Avatar group: Container that displays multiple avatars side by side.
- Overflow button: Button that appears automatically if there isn’t enough space to show all avatars.
- Avatar: Visual representation of a person, shown as an image, initials, or icon.
Anatomy of an avatar group
Types
Display types
The avatar group offers two display types: Group and Individual.
In both cases, the order of the avatars can be defined flexibly – for example, alphabetical, history-based, or random.
Avatar groups support multiple variants, including avatars that show images, initials, or icons. These elements can also be combined in different ways to suit your needs.
Note: The avatar group reuses the avatar component and its logic. If a person’s image is not available, the person’s initials are displayed. If there are more than three initials or the language system doesn’t support initials, the avatar displays a gender-neutral person icon.
Group type – focus on the sum of people
Use the group type when it’s more important to show the group as a whole. This type displays avatars with partial overlap to save space. It’s commonly used in cards, org charts, or when representing large groups (100+ people).
This is the default type.
Group type
Individual type – focus on each person
Use the individual type when users need to focus on each person in the group. Avatars are shown side by side without overlapping. This type works well for smaller groups like project teams or department members, where users may want to view details about individuals (for example, via a business card).
Individual type
- Always provide a clear label or description for either type of avatar group.
- Always display avatar groups horizontally.
- The avatar group must contain at least two avatars.
- Once you’ve decided on the avatar order that best fits your use case (for example, alphabetical), use it consistently within your app.
Size types
The avatar group supports the different sizes of the avatar component.
A: Size XS
B: Size S
C: Size M
D: Size L
E: Size XL
Avatar group sizes
Scale types
You can specify how the original image fits into every avatar in the group:
- Cover (default): The size of the image is scaled up to completely cover the avatar area. As a result, parts of the image may be outside the avatar shape. Use the “cover” fit type if the focal point is in the center of the image.
- Contain: The image is scaled down to fit into the component area. The entire image is displayed but might not fully fill the shape. In this case, the avatar displays a default background color. The image itself is always centered inside the shape. Use the “contain” fit type for images that need to be displayed in full.
Scale types “cover” (left) and “contain” (right)
States
Component states
The avatar group component supports the following component states: enabled, disabled, and hidden.
Avatar group component states: enabled (top), disabled (bottom)
For more information, see Component States.
Interaction states
The avatar group component supports the following interaction states: regular, hover and down.
“Regular” interaction state for avatar group (group and individual type)
“Hover” interaction state for avatar group (group and individual type)
“Down” interaction state for avatar group (group and individual type)
For more information, see Interaction States.
Currently, some interaction states are not showing correctly in the SAPUI5 and SAP Web Component implementations. This is being addressed.
This guideline describes the correct design.
Focus state
Clicking an avatar group (type: group) or selecting it via keyboard activates its focus state, visualized with a solid line around the avatar group.
Focused (left) and unfocused (right) avatar group (type: group)
Clicking an individual avatar within avatar group (type: individual) or selecting it via keyboard activates its focus state, visualized with a solid line surrounding the individual avatar.
Focused (left) and unfocused (right) avatar group (type: individual)
For more information, see Focus States.
Behavior and Interaction
Mouse interaction
Type: group
In group mode, the entire avatar group acts as one interactive area.
Moving the cursor over the avatar group triggers the hover state.
Hover state of an avatar group (type: group)
While the user holds down the left mouse button, the entire avatar group displays the down state and receives focus.
Down state of an avatar group (type: group)
On release, an overview of all avatars appears, including those in the overflow. By default, the full avatar group opens in a popover, but app teams can also display it on a details page.
When the popover opens, the avatar group returns to its default state, and the focus state moves to the first avatar in the popover.
A popover appears after releasing the avatar group
Clicking outside the popover closes it and returns the avatar group to its regular state.
Regular state of an avatar group (type: group)
Type: individual
Each avatar and the overflow avatar respond individually to user interaction. When the type is set to "Individual," hovering over an avatar only applies the hover state to that specific avatar, not to the entire avatar group.
Hover state of an avatar group (type: individual)
While the user holds down the left mouse button, the selected avatar within the group displays the down state and receives focus.
Down state of an avatar group (type: individual)
Releasing the avatar triggers the action. A popover appears, displaying additional information about the avatar. The content of the popover depends on the information that needs to be shown about the person.
A popover appears after releasing the avatar
Clicking outside the popover closes it, and the avatar group stays in its regular state.
Regular state of an avatar group (type: individual)
Overflow button
While the user holds down the left mouse button, the overflow button displays the down state and receives focus.
Down state of the overflow button in the avatar group (type: individual)
On a release, a popover appears, displaying all avatars in the group, including those in the overflow. The overflow button returns to its default state, and the focus state moves to the first avatar in the popover.
A popover appears after releasing the overflow button
Clicking outside the popover closes it, and the avatar group stays in its regular state.
Overflow (popover) content
When users interact with the overflow shape, they expect information about the “overflowed” avatars. By default, an overview of all “overflowed” avatars is displayed directly in a popover. Adapt the content in the popover to your individual app needs. We recommend displaying additional information for each avatar.
Minimum version of the overflow popover (left), popover with context-specific information (right)
Interacting with avatars in the overflow popover
When an avatar is in the overflow popover, the user should have access to the same detailed information as for avatars displayed in the visible group outside the overflow. Choosing the avatar either triggers navigation within the popover or navigation to another page (for example, with a person’s profile).
Navigation from the overflow button to the overflow popover and avatar details
- If the group has fewer than 100 avatars, try to show all of them in the popover. This is the minimum visualization for overflowed avatars.
- Recommended: Provide primary or secondary information in the overflow popover to offer additional value to the user. Carefully select which details should be primary and which should be secondary for display in the avatars, based on your user research findings.
- If you have more than 100 “overflowed” avatars, we recommend navigating to another page that displays all avatars properly. For example, you can display them in a grid list together with primary or even secondary information. Ensure that the avatars in the list display in the same order as in the avatar group control on the page before.
Touch enablement
On touch devices, users interact with the avatar group using a single finger tap gesture, mirroring mouse click behavior but without hover states.
Tooltip :badge, info, large, _, SAPUI5 Only:
When enabled, the tooltip helps clarify the purpose or identity of each avatar. It appears on hover and provides additional context without interrupting the user experience.
When users hover over an avatar in an individual-type avatar group, a tooltip appears showing the person's name.
Interactive avatar group (type: individual) with a tooltip
When users hover over a group-type avatar group, a tooltip appears showing the name of the entire group.
Interactive avatar group (type: group) with a tooltip
Responsiveness
Overflow button
The avatar group is responsive. If there isn’t sufficient space to display all the avatars in a group, the overflow button appears and one or more avatars move into the overflow popover. The circular overflow button indicates the exact number of avatars that can’t be displayed on the screen. The size of the overflow button supports up to 3 symbols before truncation.
If the number no longer fits within the overflow shape, the shape expands to accommodate it.
You can also define a custom overflow to display the full avatar group on a separate page. This is recommended if you have a large number of avatars.
Avatar group with overflow button
Accessibility
SAP follows international standards, such as WCAG and WAI-ARIA, and strives to make our business solutions accessible and inclusive.
For more information, see Accessibility in SAP Fiori and the Accessibility Design Tools Handbook.
Keyboard navigation
The following keyboard combinations are supported by the SAPUI5 Avatar Group component.
Screen reader support
For additional details on screen reader support and Accessible Rich Internet Applications (ARIA), see UI5 Screen Reader Support and WAI-ARIA Authoring.
Content
Localization
The avatar group supports left-to-right (LTR) and right-to-left (RTL) reading directions.
Avatar group – left-to-right
Avatar group – right-to-left
Framework Comparison
Some behaviors differ between frameworks due to implementation specifics. The table below summarizes the differences between SAPUI5 and SAP Web Components and lists the framework-specific patterns.
[internal_only] To request this feature for SAP Web Components, submit an InnerSource request. [/internal_only]
Related Links
Implementation
SAPUI5
Avatar Group (samples)
Avatar Group (API reference)
SAP Web Components
Avatar Group
Implementation
SAPUI5
Avatar Group (samples)
Avatar Group (API reference)
SAP Web Components
Avatar Group
UI Kit (Figma)
SAP Fiori for Web UI Kit / Avatar Group