The Avonni Avatar component allows your users to express themselves visually by choosing an image or icon that represents them within your application.
Last updated
Was this helpful?
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.
In some cases, you might need to show additional information visually. Status, Presence and Entity are a great way to achieve this.
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.
From the Styles panel, you can define Primary Text, Secondary Text, Tertiary Text, Icon, Border, Initials, Presence and Status for the Avatar.
The following examples demonstrate some of the available functionality for the Avatar component.
Initials
String
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.
Fallback Icon Name
String
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.
Image Source
The path to the image.
Variant
String
The variant changes the shape of the avatar.
Size
String
The size of the avatar.
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 . On an avatar, actions append a dropdown menu next to the avatar.
Here is a full you can add to the avatar.
You can find the instructions for styling .
Create Avatar with Actions
Create Avatar with Details
.avif?alt=media&token=3e764dec-2feb-41b4-a8f3-c8b1e5302af2)
