> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/avatar-group.md).

# Avatar Group

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.

<figure><img src="/files/dCbR7EUKKOMgs4NYKcHt" alt="" width="375"><figcaption></figcaption></figure>

***

## Tutorials

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>How to build an account contacts list</strong></td><td>Generate a list of contacts using the Avatar Group</td><td></td><td><a href="/files/vbsaRlgxpTcs1bI8yksS">/files/vbsaRlgxpTcs1bI8yksS</a></td><td><a href="https://youtu.be/Px9Cjyno_BM">https://youtu.be/Px9Cjyno_BM</a></td></tr></tbody></table>

***

## 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

<figure><img src="/files/jQN1FkIKOLe0wRXl2o7V" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Variant</td><td>Circle</td></tr><tr><td>Size</td><td>Large</td></tr><tr><td>Layout</td><td>Stack</td></tr><tr><td>Max Count</td><td>5</td></tr></tbody></table>

### Grid

<figure><img src="/files/ap1K4EFDqK42anT31sUL" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Variant</td><td>Square</td></tr><tr><td>Size</td><td>Large</td></tr><tr><td>Layout</td><td>Grid</td></tr><tr><td>Max Count</td><td>5</td></tr><tr><td>Data Source</td><td>Variable</td></tr><tr><td>Data Mapping / Fallback icon</td><td>avatar</td></tr><tr><td>Status Position</td><td>Top Right</td></tr><tr><td>Presence Type</td><td>Online</td></tr><tr><td>Presence Position</td><td>Top Right</td></tr></tbody></table>

### List

<figure><img src="/files/tLSQlJYofkz8nLdgjzTu" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Variant</td><td>Square</td></tr><tr><td>Size</td><td>Large</td></tr><tr><td>Layout</td><td>List</td></tr><tr><td>Max Count</td><td>5</td></tr><tr><td>Data Source</td><td>Variable</td></tr><tr><td>Data Source / Fallback icon</td><td>Contact</td></tr><tr><td>Primary Text</td><td>Full Name</td></tr><tr><td>Secondary Text</td><td>Title</td></tr><tr><td>Tags / Label</td><td>Mailing City</td></tr><tr><td>Tags / Variant</td><td>Default</td></tr></tbody></table>

***

## 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 Source                                                      | Best For                              | When to Use                                        |
| ---------------------------------------------------------------- | ------------------------------------- | -------------------------------------------------- |
| [**Manual**](/flow/component-builder/data-sources/manual.md)     | Fixed, pre-defined avatars            | Static groups — e.g., a fixed team of stakeholders |
| [**Query**](/flow/component-builder/data-sources/query.md)       | Live Salesforce records               | Dynamic groups loaded from the database            |
| [**Variable**](/flow/component-builder/data-sources/variable.md) | Items from a Flow collection variable | Content that varies based on earlier flow steps    |

### 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:

| Layout                | What It Looks Like                                  | Best For                                                 |
| --------------------- | --------------------------------------------------- | -------------------------------------------------------- |
| **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](/flow/component-builder/interactions-panel.md) 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.

{% tabs %}
{% tab title="Margin" %}
Controls outer spacing.

* **Top:** Sets the top margin.
* **Right:** Sets the right margin.
* **Bottom:** Sets the bottom margin.
* **Left:** Sets the left margin.
  {% endtab %}

{% tab title="Padding" %}
Controls inner spacing.

* **Top:** Sets the top padding.
* **Right:** Sets the right padding.
* **Bottom:** Sets the bottom padding.
* **Left:** Sets the left padding.
  {% endtab %}

{% tab title="Size" %}
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.
  {% endtab %}

{% tab title="Border" %}
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.
  {% endtab %}

{% tab title="Background" %}
Sets the background.

* **Color:** Sets the background color.
* **Linear Gradient:** Applies a gradient to the background.
  {% endtab %}

{% tab title="Header" %}
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.
  {% endtab %}

{% tab title="Flow Dialog" %}
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.
  {% endtab %}

{% tab title="Stack Border" %}
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.
  {% endtab %}

{% tab title="Show More Button" %}
Styles the overflow indicator button that appears when avatars exceed the Max Count.

* **Block Start:** Sets the top spacing inside the button.
* **Block End:** Sets the bottom spacing inside the button.
* **Inline Start:** Sets the left spacing inside the button.
* **Inline End:** Sets the right spacing inside the button.
* **Background Color:** Sets the button background color.
* **Background Color Active:** Sets the background color when the button is active.
* **Background Color Hover:** Sets the background color when hovering.
* **Border Color:** Sets the button border color.
* **Border Color Active:** Sets the border color when the button is active.
* **Border Color Hover:** Sets the border color when hovering.
* **Text Color:** Sets the button text color.
* **Text Color Active:** Sets the text color when the button is active.
* **Text Color Hover:** Sets the text color when hovering.
* **Border Size:** Sets the button border width.
* **Border Radius:** Sets the button border corner radius.
  {% endtab %}
  {% endtabs %}

## 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**).

| Output variable       | Type             | What it returns                                |
| --------------------- | ---------------- | ---------------------------------------------- |
| **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

| Output variable                | Type          | What it returns                                        |
| ------------------------------ | ------------- | ------------------------------------------------------ |
| **Clicked Header Action Name** | Text (String) | The name of the header action button the user clicked. |

### Others

| Output variable     | Type    | What it returns                                            |
| ------------------- | ------- | ---------------------------------------------------------- |
| **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](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/avatar-group.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.