The avatar component is used to represent a user by displaying a profile image or initials as a fallback.
Usage
An Avatar consists of the following elements:
- AvatarImage: Displays the user's profile picture. The image only renders when it has successfully loaded.
- AvatarFallback: A fallback element that appears when the image is loading or fails to load.
Adding an Avatar
To add an avatar:
- Open the Insert Menu and navigate to Components.
- Click or drag the Avatar onto your desired location on the page.
- Select the AvatarImage and set the
srcproperty to bind an image.
Guides
Displaying a User Persona
The Avatar component can be used to represent a user in many contexts. For example, you can use an Avatar in a blog post layout to display the author’s details.
The video below demonstrates how to structure this using the Row component, an Avatar, and text elements for the author's name and post metadata.
Avatar Fallbacks
If an image is loading or unavailable, the AvatarFallback displays the user’s initials as a visual placeholder.
To add a fallback:
- Select the AvatarFallback component.
- In the Properties Panel, set the initials to the user’s initials (e.g., "JD" for John Doe).
- If you notice a flash when loading, use the delayMs property. This ensures the fallback only appears if the image takes too long to load.
Shapes
To change the shape of your Avatar:
- Select the Avatar component and navigate to the properties panel.
- Scroll to the Borders section.
- Adjust the Radius value to achieve the desired shape.
Sizes
You can modify the avatar size to fit different UI contexts:
- Select the Avatar component and navigate to the properties panel.
- Locate the Spacing & Size controls.
- Adjust the width and height values to set a custom size.
Increasing the width and height creates a larger avatar, which can be used in profile headers, while reducing the dimensions makes it suitable for compact UI elements like chat bubbles.
Properties
AvatarImage
Property | Type | Default | Description |
alt* | string | - | The alt text for the image |
src* | string | - | The image to render |
AvatarFallback
Property | Type | Default | Description |
initials* | string | - | The initials to render |
delayMs | string | - | Useful for delaying rendering so it only appears for those with slower connections. |