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.

Option	What it shows	How to configure it
Icon	A predefined icon from the Salesforce icon library	Type an icon API name in the Icon Name field (e.g., standard:contact, standard:account)
Image	A photo or custom graphic	Enter 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 — 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 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 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.

Value	What it looks like	Best for
Circle	Avatar clipped into a circle	People — contacts, users, agents
Square	Avatar in a square with rounded corners	Companies, 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

1. 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

1. 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 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).