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.
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.
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.
First Name
The value for the first name.
Format
Controls how much of the name is displayed. Default is Long.
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.
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.
Alternative Text
Accessible alternative text for the avatar image. Found under advanced options.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Last updated
Was this helpful?