The Avatar component is used to represent a user by displaying a profile image or initials as a fallback.
Anatomy
An Avatar consists of the following elements:
- AvatarImage: An image element that 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 to your page:
- Add the Avatar component from the Library.
- To bind an image to your Avatar, select the AvatarImage component, move to the Properties Panel, and set the
srcproperty.
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
initialsto the user’s initials (e.g.,"JD"for John Doe).
- If you notice a flash when loading, use the
delayMsproperty. This delays the fallback from appearing until after a specified number of milliseconds. Use this setting to ensure the fallback only appears if the image takes too long to load.
Shapes
To change the shape of your Avatar:
- Select the Avatar component.
- Go to the Properties Panel > Borders.
- Adjust the radius value to get your desired shape.
Sizes
You can modify the avatar size to fit different UI contexts:
- Select the Avatar component.
- Navigate to Properties Panel > Spacing & Size.
- 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. 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. |