Avatar

An avatar component represents an object or entity.

The Avatar is also available as an Experience Cloud Component.

Overview

The Avatar Component allows users to view and select avatars or use icons. It is typically used in applications where users can choose an avatar or icon to represent themselves, such as in social media or online gaming platforms.

Overall, the Avatar Component is a valuable component for allowing users to personalize their online presence and express their identity in a visually appealing way.

This page walks you through:

• Changing the Avatar properties

• Adding interactions

• Styling the Avatar

• Examples

• Specifications

Changing the Properties

Adding Text information

As an option, text can be added to the avatar component to illustrate it. Primary and secondary text can be used as well as tags to highlight specific information.

Text displayed next to the avatar icon.

Adding Status, Presence and Entity

In some cases, you might need to show additional information visually. Status, Presence and Entity are a great way to achieve this.

Adding Actions

Actions give users a quick way to accomplish a task inside Salesforce. For example, when a user taps on a Button, the action that should be performed can be specified from the interactions tab. On an avatar, actions append a dropdown menu next to the avatar.

Adding actions is required to be able to create interactions with the avatar. Actions are only displayed with the avatar size set from small and above.

Actions on an avatar

Adding Interactions

From the interactions panel, you are able to create interactions when users click on an activity item and/or an action. For example, you may want to redirect users to the record page when they click the activity item link.

Here is a full list of actions you can add to the avatar.

Styling the Avatar

From the Styles panel, you are able to define Primary Text, Secondary Text, Tertiary Text, Icon, Border, Initials, Presence and Status for the Avatar.

You can find the instructions for styling here.

Tutorials

The following examples demonstrate some of the available functionality for the Avatar component.

Create Avatar with Actions

Create Avatar with Details

Specifications

Attribute	Type	Description
Initials	String	If the record name contains two words, like first and last name, use the first capitalized letter of each. For records that only have a single word name, use the first two letters of that word using one capital and one lower case letter.
Fallback Icon Name	String	The Lightning Design System name of the icon used as a fallback when the image fails to load. The initials fallback relies on this for its background color.
Image Source		The path to the image.
Variant	String	The variant changes the shape of the avatar.
Size	String	The size of the avatar.