Avatar
The Avatar component is an image element with an automatic fallback, designed to represent users in profiles, comments, and other user interfaces. It ensures a consistent and reliable visual representation by displaying a fallback image or initials when the primary image fails to load, maintaining the integrity of the user experience across the application.
Additional Examples
With Hover Card
Configurable Props
<Avatar>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
<Avatar> | Component | False | Acts as the wrapper for the avatar image. |
<AvatarImage>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
onLoadingStatusChange | function (status: "idle" | "loading" | "loaded" | "error") => void | False | A callback providing information about the loading status of the image. This is useful in case you want to control more precisely what to render as the image is loading. |
<AvatarFallback>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
delayMs | number | False | Useful for delaying rendering so it only appears for those with slower connections. |