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

# Formatted Name

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

***

## Overview

The Formatted Name component renders personal name fields — salutation, first name, middle name, last name, and suffix — in a configurable layout. Map each field to the corresponding Salesforce record field to pre-populate the display. An optional avatar can be shown alongside the name.

## Configuration

To configure it, click the component on the Flow screen. The Edit Formatted Name Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.

### Properties

**Label** — text displayed above the name fields.

**Field Hint Text** — help text shown beneath the component (requires a label to be set).

**Variant** — controls how the label is positioned: Standard, Label Hidden, Label Inline, Label Stacked, or Label Spread.

**Format** — determines which name parts are displayed and how they are arranged:

| Format     | What It Shows                                              |
| ---------- | ---------------------------------------------------------- |
| **Short**  | First name and last name only                              |
| **Medium** | Salutation, first name, and last name                      |
| **Long**   | Salutation, first name, middle name, last name, and suffix |

**Salutation** — map the Salesforce field containing the salutation or title (e.g., Dr., Mr., Mrs.).

**First Name** — map the Salesforce field for the first name.

**Middle Name** — map the Salesforce field for the middle name.

**Informal Name** — map the Salesforce field for the informal (nickname) version of the name.

**Last Name** — map the Salesforce field for the last name.

**Suffix** — map the Salesforce field for the suffix (e.g., Jr., Sr., Esq.).

### Avatar

Display an avatar next to the formatted name. Configure the image source, icon fallback, shape, size, and presence indicator.

## Interactions

Interactions define what happens when users click on the component. Configure them from the **Interactions** panel — see the full [list of actions](/flow/component-builder/interactions-panel.md).

* **On Click**

## Styling

The **Style** tab gives you fine-grained control over the Formatted Name's appearance. Configure it from the **Style** tab of the Edit Formatted Name panel.

{% tabs %}
{% tab title="Margin" %}
Controls outer spacing.

* **Top:** Sets the top margin.
* **Right:** Sets the right margin.
* **Bottom:** Sets the bottom margin.
* **Left:** Sets the left margin.
  {% endtab %}

{% tab title="Padding" %}
Controls inner spacing.

* **Top:** Sets the top padding.
* **Right:** Sets the right padding.
* **Bottom:** Sets the bottom padding.
* **Left:** Sets the left padding.
  {% endtab %}

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

* **Color:** Sets the border color.
* **Size:** Sets the border width.
* **Style:** Sets the border style (solid, dashed, etc.).
* **Radius:** Sets the corner radius.
  {% endtab %}

{% tab title="Background" %}
Sets the background.

* **Color:** Sets the background color.
* **Linear Gradient:** Applies a gradient background.
  {% endtab %}

{% tab title="Label" %}
Styles the label text displayed above the name fields.

* **Color:** Sets the label text color.
* **Font Size:** Sets the label font size.
* **Font Style:** Sets the label font style (normal, italic, etc.).
* **Font Weight:** Sets the label font weight.
  {% endtab %}

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

* **Color:** Sets the name text color.
* **Font Size:** Sets the name font size.
* **Font Style:** Sets the name font style (normal, italic, etc.).
* **Font Weight:** Sets the name font weight.
  {% endtab %}

{% tab title="Avatar" %}
Styles the optional avatar displayed alongside the name.

* **Border Color:** Sets the avatar border color.
* **Border Size:** Sets the avatar border width.
* **Border Style:** Sets the avatar border style.
* **Initials Font Color:** Sets the color of the initials text inside the avatar.
* **Initials Font Color Hover:** Sets the initials text color on hover.
* **Initials Font Weight:** Sets the font weight of the initials text.
* **Initials Font Weight Hover:** Sets the initials font weight on hover.
* **Icon Background Color:** Sets the background color of the icon fallback.
* **Icon Foreground Color:** Sets the foreground color of the icon fallback.
* **Image Object Fit:** Controls how the avatar image fits within its container.
  {% 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/flow/flow-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.