# Avatar ## Overview Display a visual representation of a person, group, or entity — using an icon or image, with optional labels, status indicators, and interactive actions. *** ## General ### Source Defines what renders inside the avatar frame.
OptionWhat it showsHow to configure it
IconA predefined icon from the Salesforce icon libraryType an icon API name in the Icon Name field (e.g., standard:contact, standard:account)
ImageA photo or custom graphicEnter a URL in the Image URL field — see options below
**Three ways to set the Image URL:** * **Upload** — Click the **Select Image** button to browse and upload an image directly * **Static URL** — Paste a fixed URL into the field (e.g., a Salesforce Static Resource or any publicly accessible image link) * **Dynamic** — Click the **Mapped** button next to the field to bind the Image URL to a data source at runtime. Two sources are available: * [**Record variable**](/dynamic-components/component-builder/resources/variable.md) — Select a record variable you've created in the Dynamic Components app, then pick the field that contains the image URL (e.g., `Profile_Photo_URL__c` on a Contact record). Each avatar will render the image from its own record's data. * **`$component` attribute** — If you've set a [**Target Page Object**](/dynamic-components/core-concepts/target-page-object.md) at the component level, the `$component` attribute gives you access to the fields of that object. Map the Image URL to the relevant image field on that object, and the avatar will resolve the URL from the current page context automatically
*This illustration shows how to map the avatar image to the current record owner by selecting the User object through the* [***Target Page Object***](/dynamic-components/core-concepts/target-page-object.md) *setup, then choosing the image URL field configured on that object using the `$Component` global variable.* *** ### Variant Controls the shape of the avatar frame. Set using the **Variant** dropdown in the General section.
ValueWhat it looks likeBest for
CircleAvatar clipped into a circlePeople — contacts, users, agents
SquareAvatar in a square with rounded cornersCompanies, groups, object-based entities
### Size Controls how large the avatar renders on screen. Set using the **Size** dropdown in the General section. * **Small / Medium / Large** — Predefined presets for standard layouts * **Custom** — Type an exact pixel value (e.g., `72px`) for precise control *** ## Details Displays text and tags alongside the avatar. All fields accept either a static value or a dynamic value mapped to a record attribute. | Property | What it displays | Static | Dynamic | | ------------------ | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | | **Primary Text** | Main label next to the avatar | Type a fixed value directly into the field (e.g., `Acme Corp`) | Bind to a record variable field (e.g., `Contact.Name`) or a `$component` attribute field | | **Secondary Text** | Smaller supporting line below the primary label | Type a fixed value (e.g., `Account Manager`) | Bind to a record variable field (e.g., `Contact.Title`) or a `$component` attribute field | | **Text Position** | Where the text block sits relative to the avatar — Left, Right, Top, or Bottom | Select `Left`, `Right`, `Top`, or `Bottom` from the dropdown — `Right` for list rows, `Bottom` for card grids | \_\_ | | **Tags** | Small pill-shaped labels for categorization | Type values directly, one per tag | Bind to a record variable field or `$component` attribute field containing the tag values | ## Status Overlays a small colored dot on the avatar to communicate a record's current state — without needing extra columns or text. **To configure:** 1. Enable the **Status** toggle in the Status section 2. In the **Type** dropdown, select the state to display: | Value | Dot appearance | | ---------- | -------------- | | `Approved` | Green dot | | `Locked` | Yellow dot | | `Declined` | Red dot | | `Unknown` | Gray dot | 3. Set the **Position** — choose which corner the dot appears in: `Top Left`, `Top Right`, `Bottom Left`, or `Bottom Right` **Advanced options:** * **Title** — Enter a short text label associated with the status dot (e.g., `Approved`, `Pending Review`). Useful for tooltip or accessibility purposes. Both **Type** and **Title** accept a static value or can be mapped dynamically using the **Map** button — for example, mapping **Type** to a record attribute so the dot updates automatically based on the record's current state *** ## Presence Overlays a small colored dot on the avatar to indicate a person's availability. Both Status and Presence can appear on the same avatar simultaneously. ### **To configure** 1. Enable the **Presence** toggle in the Presence section 2. In the **Type** dropdown, select the availability state to display: | Value | Dot appearance | | --------- | -------------- | | `Online` | Green dot | | `Busy` | Red dot | | `Focus` | Purple dot | | `Offline` | Gray dot | | `Blocked` | Black dot | | `Away` | Yellow dot | 3. Set the **Position** — choose which corner the dot appears in: `Top Left`, `Top Right`, `Bottom Left`, or `Bottom Right` ### **Advanced options** * **Title** — Enter a short text label associated with the presence dot (e.g., `Available`, `In a meeting`). Useful for tooltip or accessibility purposes. Both **Type** and **Title** can accept a static value or be mapped dynamically using the Map button—for example, mapping **Type** to a record attribute so the dot updates automatically based on the person's current availability. > **Status vs. Presence** — Use Status for business states tied to a record (approval, stage, task progress). Use Presence for a person's real-time availability. Both dots can display at the same time *** ## Entity Icon *(Optional)* Adds a small secondary icon badge in a corner of the avatar to clarify what type of entity is being represented — useful when a list mixes individuals, teams, and companies. **What it looks like:** A small circular icon overlaid on the avatar corner, similar to a company logo badge on a LinkedIn profile photo. **To configure:** 1. Enable the **Entity Icon** toggle 2. In **Icon Name**, type a Salesforce icon API name (e.g., `standard:groups` for a team, `standard:account` for a company) 3. Set the **Size** — keep it small enough not to obstruct the main avatar image (typically 20–24px) 4. Set the **Position** — choose which corner it appears in: top-left, top-right, bottom-left, or bottom-right *** ## Actions *(Optional)* Adds interactive buttons to the avatar. Each action is first created here visually, then connected to a behavior in the **Interactions Panel**. ### **To configure** 1. Click **Add Action** in the Actions section 2. Set the **Label** — the text shown on the button (e.g., `Message`, `Edit`, `Assign`) Once your actions are created, open the [**Interactions Panel**](/dynamic-components/component-builder/interactions.md) and use the **On Action Click** trigger to define what happens when a user clicks each button — such as navigating to a record, opening a modal, or firing a custom event. *** ## Common Use Cases * **Contact lists** — Circle avatar with Primary Text mapped to `Contact.Name`, Secondary Text to `Contact.Title`, and a Presence dot mapped to `Availability__c` * **Account records** — Square avatar with image URL from `Account.Logo_URL__c`, an entity icon set to `standard:account`, and a Status dot mapped to `Account.Rating` * **Support queues** — Agent avatars with Presence indicators and a "Message" action button * **Team dashboards** — Avatar grid with name, department, and skill tags all mapped to User record fields *** ## Notes * **Image URLs** must be publicly accessible or hosted within Salesforce (Static Resources or Salesforce Files with public sharing). Private or authenticated URLs will not render. * **Alt Text** — Fill in the **Alternative Text** field in the General section so screen readers can describe the avatar to users with visual impairments. * **Fallback** — If a mapped image URL is empty for a given record, the avatar automatically displays the default silhouette icon. * **Consistency** — Use the same Variant and Size for avatars of the same type across your app (e.g., all contact avatars as circles at Medium size). --- # Agent Instructions: 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: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/avatar.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.