Avatar Group
The Avonni Avatar Group component clearly and organizedly represents groups of users within your application, enhancing the user experience and making information easily accessible.
The Avonni Avatar Group displays a collection of avatars representing people, users, or related records. Use it to show who is involved in a record, a group, or an activity — with optional filtering, search, and click interactions.
Tutorials
Overview
The Avatar Group supports three layouts (Stack, Grid, List), multiple sizes and shapes, and can be fed from a manual list or a Salesforce record collection. When using the List layout, each avatar can display primary text, secondary text, and tags alongside it.
Stack
Variant
Circle
Size
Large
Layout
Stack
Max Count
5
Grid
Variant
Square
Size
Large
Layout
Grid
Max Count
5
Data Source
Variable
Data Mapping / Fallback icon
avatar
Status Position
Top Right
Presence Type
Online
Presence Position
Top Right
List
Variant
Square
Size
Large
Layout
List
Max Count
5
Data Source
Variable
Data Source / Fallback icon
Contact
Primary Text
Full Name
Secondary Text
Title
Tags / Label
Mailing City
Tags / Variant
Default
Configuration
To configure it, click the component on the Flow screen. The Edit Avatar Group Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Data Source
The Data Source setting determines where the avatar content comes from.
Data Mapping
When using Variable or Query, connect Salesforce fields to avatar properties in the Data Mappings section of the Properties tab. Map fields such as the avatar's label (display name), image URL, initials, and description.
Properties
Variant sets the shape of all avatars in the group: Circle or Square.
Size controls how large each avatar appears: X-Small, Small, Medium, Large, X-Large, or XX-Large.
Icon Position determines the alignment of icon-type avatars within their container: Start, Center, or End.
Layout controls how avatars are arranged:
Stack (default)
Avatars overlap each other horizontally
Compact representation of a group — fits in tight spaces
Grid
Avatars arranged in a tile grid
Displaying a uniform group at a glance
List
Avatars in a vertical list with text alongside each
Showing names, roles, or details next to each person
Max Count limits how many avatars are shown before an overflow indicator appears (e.g., "+3 more"). Range: 1–200.
Auto-Format Initials — when enabled, the component automatically generates initials from each avatar's name (two words → first letters of each; one word → first two letters).
Items Clickable — when enabled, users can click individual avatars. Wire the On Avatar Click interaction to define what happens.
Header
Configure a header above the group with a title, caption, icon, and optional action buttons. Enable Is Joined to remove the bottom border so the component sits flush with the one below it.
Filter
Add a picklist-based filter to let users narrow down which avatars are displayed. Configure Display As Popover to show filters in a popover menu, and optionally control picklist sort order.
Search
Enable Searchable to show a search bar above the group. Use Search Engine Attributes to specify which fields are searched.
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.
Header Action Click
Fires when a user clicks a header action button. The targetName output variable contains the name of the header action that triggered the interaction, so you can branch logic based on which button was clicked.
Styling
The Style tab gives you fine-grained control over the Avatar Group's appearance. Configure it from the Style tab of the Edit Avatar Group panel.
Controls outer spacing.
Top: Sets the top margin.
Right: Sets the right margin.
Bottom: Sets the bottom margin.
Left: Sets the left margin.
Controls inner spacing.
Top: Sets the top padding.
Right: Sets the right padding.
Bottom: Sets the bottom padding.
Left: Sets the left padding.
Controls dimensions.
Width: Sets the component width.
Height: Sets the component height.
Min Width: Sets the minimum width.
Max Width: Sets the maximum width.
Min Height: Sets the minimum height.
Max Height: Sets the maximum height.
Overflow: Controls how content is clipped or scrolled when it exceeds the size.
Customizes the border.
Color: Sets the border color.
Size: Sets the border width.
Style: Sets the border style (solid, dashed, etc.).
Radius: Sets the border corner radius.
Sets the background.
Color: Sets the background color.
Linear Gradient: Applies a gradient to the background.
Styles the optional header above the content.
Color: Sets the header background color.
Title Text Color: Sets the color of the title text.
Title Font Size: Sets the font size of the title.
Title Font Style: Sets the font style of the title (normal, italic).
Title Font Weight: Sets the font weight of the title.
Subtitle Text Color: Sets the color of the subtitle text.
Subtitle Font Size: Sets the font size of the subtitle.
Icon Color: Sets the color of the header icon.
Action Color: Sets the color of the header action buttons.
Adjusts display when opened as a modal dialog inside a Flow screen.
Width: Sets the dialog width.
Height: Sets the dialog height.
Background Color: Sets the dialog background color.
Customizes the border around individual avatars in Stack layout.
Color: Sets the border color of stacked avatars.
Size: Sets the border width of stacked avatars.
Style: Sets the border style of stacked avatars.
Output Variables
The Avatar Group exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Avatar Group component, and pick the output variable you need.
Avatar Selection
When a user clicks an avatar (requires Items Clickable).
Clicked Item
Record (SObject)
The record behind the avatar the user clicked.
Clicked Item Name
Text (String)
The name (key) of the clicked avatar.
Header Actions
Clicked Header Action Name
Text (String)
The name of the header action button the user clicked.
Others
Number of Items
Integer
The total number of avatars currently loaded in the group.
Flow Interaction Output Variables
Like all interactive Flow components, the Avatar Group exposes generic output slots (Variable 1–10) that an Open Flow Dialog or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?