# Avatar

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

***

## Changing the Properties

### Adding Text information

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

<figure><img src="/files/KKGms2YiaM5QGwfFo1J0" alt=""><figcaption><p>Text displayed next to the avatar icon.</p></figcaption></figure>

### 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. &#x20;

<figure><img src="/files/80Dp8naR633YbMwWF0mT" alt=""><figcaption></figcaption></figure>

### 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](/flow/component-builder/interactions-panel.md). On an avatar, actions append a dropdown menu next to the avatar.

{% hint style="info" %}
Adding actions is required to create interactions with the avatar. Actions are only displayed with the avatar size set to small or above.
{% endhint %}

<figure><img src="/files/6jgQ6EbaeAqXkap02q3C" alt=""><figcaption><p>Actions on an avatar</p></figcaption></figure>

***

## Adding Interactions

From the interactions panel, you can 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.&#x20;

Here is a full [list of actions](/flow/component-builder/interactions-panel.md) you can add to the avatar.&#x20;

***

## Styling the Avatar

From the Styles panel, you can define `Primary Text`, `Secondary Text`, `Tertiary Text`, `Icon`, `Border`, `Initials`, `Presence` and `Status` for the Avatar.&#x20;

You can find the instructions for styling [here](/flow/component-builder/style-panel.md).

***

## Tutorials

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

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Create Avatar with Actions</strong></td><td></td><td></td><td><a href="/pages/sY1i2V5kD8K0vpVp3meZ">/pages/sY1i2V5kD8K0vpVp3meZ</a></td></tr><tr><td><strong>Create Avatar with Details</strong></td><td></td><td></td><td><a href="/pages/fe2RtjeJSUxgA2JfWqtG">/pages/fe2RtjeJSUxgA2JfWqtG</a></td></tr></tbody></table>

***

## Specifications

<table><thead><tr><th width="287">Attribute</th><th width="112.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>Initials</td><td>String</td><td>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.</td></tr><tr><td>Fallback Icon Name</td><td>String</td><td>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.</td></tr><tr><td>Image Source</td><td></td><td>The path to the image.</td></tr><tr><td>Variant</td><td>String</td><td>The variant changes the shape of the avatar.</td></tr><tr><td>Size</td><td>String</td><td>The size of the avatar.</td></tr></tbody></table>


---

# 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/flow/flow-components/avatar.md?ask=<question>
```

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.