Avatar Group
The Avonni Avatar Group component displays a collection of avatars — people, users, or related records — in a compact, visually engaging group. Use it to represent teams, project members, or any list of individuals directly on your Experience page.
Overview
The Avatar Group supports three builder presets that correspond to its three layout modes: Avatar Stack (overlapping avatars), Avatar Grid (tiled layout), and Avatar List (horizontal list with labels). All three are the same underlying component — the preset simply sets the initial Layout value.
Connect the component to a Salesforce object to generate avatars dynamically, or build a fixed set of avatars manually. You can optionally add a header, enable filtering, and allow users to search through large groups.
Use cases
Team rosters: Display the members of a team or department.
Project teams: Show avatars for everyone working on a project.
Customer lists: Represent the contacts or users associated with an account.
Configuration
To configure the Avatar Group, select it on the canvas. The Edit Avatar Group panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Data Source
Before the Avatar Group can display anything, you must tell it where to get its data. You have three options:
Manual
Enter data directly into the component configuration.
Variable
This is useful for data that changes based on user interactions or other component logic.
Query
This is the most common option for displaying Salesforce records.
Data Mapping
When using a dynamic data source (Query or Variable), configure the Data Mappings section to tell the component how to build each avatar from your records.
Map fields from your Salesforce object to avatar attributes such as:
Initials — typically the first letters of a first and last name field.
Primary Text — commonly the record name or a key identifier.
Secondary Text — a role, title, or other supporting detail.
Image — a URL field containing the avatar photo.
Filter Fields
In the Data Mappings section, select which fields are available to end-users as filters. Only the fields you select here will appear in the filter menu.
Search Fields
By default, the search covers all searchable fields you map in the Data Mappings section. Use Search Fields to limit the search to specific mapped fields.
Content
The Content group controls the core appearance and behaviour of the avatar group.
Variant
Sets the shape of all avatars in the group. Choose Circle for round avatars or Square (default) for square ones.
Size
Controls how large each avatar is rendered. Options range from X-Small to Xx-Large, with Medium as the default. Larger sizes such as X-Large and Xx-Large also reveal tertiary text details on each avatar.
Icon Position
When an avatar displays a fallback icon (no image or initials), this setting controls where the icon is placed within the avatar frame: Start, Center (default), or End.
Layout
Determines how avatars are arranged:
Stack (default) — avatars overlap slightly, creating a compact clustered look.
Grid — avatars are arranged in a tile grid.
List — avatars appear in a horizontal row with full label details visible.
Max Count
The maximum number of avatars displayed at once (1–500). Use this to keep the group tidy when the data source returns many records.
Initials Auto Formatted
When enabled, the component automatically derives two-letter initials from each avatar's name: first letters of each word for multi-word names, or the first two letters for a single word.
Items Clickable
When enabled, every avatar in the group becomes clickable. Configure what happens on click in the Interactions tab.
Header
The Header group lets you add context above the avatar group.
Title
Main heading displayed in the header.
Caption
Supplementary text shown above the title.
Avatar
An optional avatar in the header. Set an Image, Fallback Icon Name, or Initials; adjust Size, Variant, and Alternative Text under Advanced Options.
Help Text
A hoverable icon in the header that reveals guidance text for users.
Is Joined
Removes the rounded shadow at the bottom of the header so it sits flush against the component below.
Actions
Buttons added to the header that trigger interactions. Use Visible Actions Buttons to control how many appear directly before the rest overflow into a menu.
Hide Actions
Hides the header actions menu. Defaults to off.
Disable Actions
Disables the header actions menu so users cannot interact with it. Defaults to off.
Filter
The Filter group controls how the filter menu is presented to end-users. Filter fields are enabled in the Data Mappings section.
Display As Popover — when enabled, the filter controls appear in a floating popover instead of inline.
Use Record Picklist Values — when filtering a picklist field, derives the filter options only from values actually present in the loaded records rather than the field's full picklist definition.
Use Cascading Filter Values — when enabled, selecting a filter option narrows the choices available in all other filters to only those matching the current selection. Overrides Use Record Picklist Values.
Search
The Search group adds a search bar so users can find specific avatars by name or other fields.
Show Search — toggle to enable the search bar.
Placeholder — the hint text shown inside the search input before the user types. Defaults to
Search. Requires Show Search to be enabled.Position — where the search bar appears: Left (default), Right, Center, or Fill (stretches to available width). Requires Show Search to be enabled.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Interactions
Interactions define what happens when users interact with the Avatar Group. Configure them from the Interactions tab of the Edit Avatar Group panel.
Avatar Click
Fires when a user clicks an avatar. Requires Items Clickable to be enabled. Use this to navigate to a record page, open an edit form, or trigger any flow logic tied to the selected avatar.
Header Action Click
Fires when a user clicks one of the header action buttons. Use the targetName output to identify which action was clicked and branch your flow logic accordingly.
Output Variables
The Avatar Group exposes these output variables you can reference elsewhere on the page after the user interacts with it.
Avatar Click
When a user clicks an avatar, these variables update with the clicked avatar's data.
Clicked Item
Object
The clicked avatar's data — its name, primary text, secondary text, tertiary text, initials, image source, fallback icon, href, and target.
Clicked Item sObject
Record (SObject)
The full Salesforce record associated with the clicked avatar. Requires a Query or Variable data source.
Example: When a user clicks a team member's avatar, use Clicked Item sObject to display that person's Contact record details in a side panel.
Header Actions
Clicked Header Action Name
Text (String)
The name of the header action button the user clicked.
Example: Use Clicked Header Action Name to branch logic — navigate to a "New Contact" form when the value is
new, or open a report when it isview-all.
Others
Number of Items
Number
The total number of avatars currently loaded in the group.
Styling
Configure the Avatar Group's appearance from the Style tab of the Edit Avatar Group panel.
Controls the outer spacing around the group.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the group's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the group.
Color: Set the border color.
Size: Set the border thickness.
Style: Set the border style (solid, dashed, dotted, etc.).
Radius: Round the corners of the border.
Controls the group's dimensions.
Width / Height: Set fixed dimensions for the group.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Styles the header background and spacing.
Background Color: Set the header background color.
Padding Top / Right / Bottom / Left: Adjust the inner spacing of the header.
Margin Bottom: Set the space below the header.
Customizes the border drawn around each avatar in the Stack layout.
Color: Set the border color.
Size: Set the border thickness.
Style: Set the border style (solid, dashed, dotted, etc.).
Customizes the button that reveals avatars beyond the Max Count.
Background Color / Text Color / Border Color: Set the colors for the default, active, and hover states.
Border Size / Border Radius: Control the button border.
Block Start / Block End / Inline Start / Inline End: Set the spacing around the button.
Last updated
Was this helpful?