> 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/dynamic-components/components/formatted-name.md).

# Formatted Name

The Avonni Formatted Name component renders a personal name — salutation, first, middle, last, informal name, and suffix — in a configurable display format. Use it wherever you need to present a person's full name from your Salesforce data with consistent formatting and an optional avatar.

## Overview

The Formatted Name component takes individual name parts and assembles them into a single, locale-aware display. You control how much of the name is shown (short, medium, or long), add an optional label, and optionally pair the name with an avatar that can carry a photo, initials, or a fallback icon.

## Configuration

To configure the Formatted Name, select it on the canvas. The configuration panel opens on the right. The sections below mirror its properties from top to bottom.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FZZPgpneunZ3PCN1UI85B%2Fformatted-name-builder-properties.png?alt=media" alt="The Edit Formatted Name panel showing the Properties tab and the collapsed Avatar section" width="320"><figcaption><p>The Properties tab, ending on the collapsed <strong>Avatar</strong> section.</p></figcaption></figure>

### Properties

#### Label

Enter a label to display alongside the formatted name. When a label is set, the **Helptext** and **Variant** settings become available.

#### Helptext

Add a short help text that appears as a tooltip next to the label. Requires **Label** to be set.

#### Variant

Controls the position of the label relative to the formatted name. Requires **Label** to be set.

| Option                 | Description                                                    |
| ---------------------- | -------------------------------------------------------------- |
| **Standard** (default) | Label appears above the name.                                  |
| **Label Hidden**       | Label is not visible but remains accessible to screen readers. |
| **Label Inline**       | Label and name appear on the same line, label to the left.     |
| **Label Stacked**      | Label floats above the name field.                             |
| **Label Spread**       | Label and name are spread to opposite ends of the row.         |

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2Feb5z2V6bZ9UhJ22vrc2g%2Fformatted-name-variant.png?alt=media" alt="The five label variants over the same name"><figcaption><p>The five variants, each over the same name.</p></figcaption></figure>

#### First Name

The value for the first name.

#### Format

Controls how much of the name is displayed. Default is **Long**.

| Option             | Description                                         |
| ------------------ | --------------------------------------------------- |
| **Short**          | Renders a compact version of the name.              |
| **Medium**         | Renders a medium-length version of the name.        |
| **Long** (default) | Renders the full name including all provided parts. |

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FAkKpAW35SJVnMnIJ5Fgh%2Fformatted-name-format.png?alt=media" alt="Short, Medium and Long rendered from the same name parts"><figcaption><p>The same name parts in all three formats, so the parts each one drops are visible.</p></figcaption></figure>

#### Informal Name

The value for the informal name (e.g. a nickname).

#### Last Name

The value for the last name.

#### Middle Name

The value for the middle name.

#### Salutation

A title such as Dr., Mr., or Mrs. that prefixes the name.

#### Suffix

A suffix such as Jr., Sr., or Esq. that follows the name.

### Avatar

Optionally display an avatar alongside the formatted name. Expand this section to configure it.

#### Variant

Sets the shape of the avatar. **Square** (default) or **Circle**.

#### Initials

Text initials to display inside the avatar when no image is provided.

#### Icon Name

A fallback icon shown when neither an image nor initials are available.

#### Size

Controls the avatar size. Options: **X Small**, **Small**, **Medium** (default), **Large**, **X Large**, **Xx Large**.

#### Image

URL of the photo to display in the avatar.

#### Presence Type

Shows a presence indicator badge on the avatar. Options: **Online**, **Busy**, **Focus**, **Offline**, **Blocked**, **Away**.

#### Presence Position

Sets where the presence badge appears on the avatar. Options: **Top Left**, **Top Right**, **Bottom Left**, **Bottom Right** (default). Requires **Presence Type** to be set.

#### Avatar Position

Controls whether the avatar appears to the **Left** (default) or **Right** of the name.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FzjyxeTaDguv9S3YUu7Vo%2Fformatted-name-avatar.png?alt=media" alt="The avatar to the left and to the right of the name, each with an online presence indicator"><figcaption><p>The avatar at each position, with a presence indicator.</p></figcaption></figure>

#### Alternative Text

Accessible alternative text for the avatar image. Found under advanced options.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Styling

Configure the Formatted Name's appearance from the **Style** tab of the Edit Formatted Name panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the component's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the component.

* **Color / Size / Style / Radius:** Set the border color, thickness, style, and corner rounding.
  {% endtab %}

{% tab title="Horizontal Alignment" %}
Sets the horizontal alignment of the name within its container.

* **Horizontal Alignment:** Choose how the name is justified.
  {% endtab %}

{% tab title="Container" %}
Styles the component container.

* **Background Color:** Set the container background color.
  {% endtab %}

{% tab title="Label" %}
Styles the component's label.

* **Color / Font Size / Font Style / Font Weight:** Set the label color and typography.
  {% endtab %}

{% tab title="Name" %}
Styles the formatted name text.

* **Color / Font Size / Font Style / Font Weight:** Set the name color and typography.
  {% endtab %}

{% tab title="Avatar" %}
Styles an avatar shown alongside the name.

* **Border Color / Border Size / Border Style:** Customize the avatar border.
* **Initials Font Color / Font Color Hover / Font Weight / Font Weight Hover:** Style avatar initials.
* **Icon Background Color / Icon Foreground Color / Icon Foreground Color Default:** Style a fallback icon.
* **Image Object Fit:** Control how an avatar image fills its area.
  {% endtab %}
  {% endtabs %}


---

# 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/dynamic-components/components/formatted-name.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.