> 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
The Avonni Formatted Name component displays personal name parts (salutation, first, middle, last, suffix) formatted for consistent presentation, with an optional avatar.
***
## 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** — label for the component.
**Help Text** — help text for the component. Requires **Label**.
**Variant** — changes the position of the component and label: Standard, Label Hidden, Label Inline, Label Stacked, or Label Spread. Requires **Label**.
**First Name** — the value for the first name.
**Format** — the format used to display the name:
* **Short** — first and last name (e.g. "John Doe").
* **Medium** — adds the middle name (e.g. "John Middleton Doe").
* **Long** — adds the salutation and suffix (e.g. "Mr. John Middleton Doe The 3rd Jo").
**Informal Name** — the value for the informal name.
**Last Name** — the value for the last name.
**Middle Name** — the value for the middle name.
**Salutation** — the value for the salutation, such as Dr. or Mrs.
**Suffix** — the value for the suffix, such as Jr. or Esq.
### Avatar
Display an avatar alongside the formatted name. Configure its **Icon Name** (fallback icon), **Image**, **Initials**, shape (**Variant** — Circle or Square), **Size**, **Position** (left or right of the name), **Presence Type** and **Presence Position** indicator, and **Alternative Text**.
## 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=&goal=
```
`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.
.avif?alt=media)