Avatars
Usage and anatomy
Avatar displays a person's image with a fallback for missing or failed images. Compose Avatar.Image and either Avatar.TextFallback or Avatar.IconFallback inside Avatar.Root.
import * as Avatar from "@acme/ui/avatar"<Avatar.Root><Avatar.Image src="/avatars/ada.png" alt="Ada Lovelace" /><Avatar.TextFallback>AL</Avatar.TextFallback></Avatar.Root>
Text fallbacks should use short recognizable initials. The fallback automatically replaces the image when it cannot load, and inherits the root's size and shape.
Avatars - Rounded
License required
In order to get the source code for this component, you need to buy a license.
Avatars - Squared
License required
In order to get the source code for this component, you need to buy a license.
Avatars - Stacked
License required
In order to get the source code for this component, you need to buy a license.
Avatars - Fallbacks
License required
In order to get the source code for this component, you need to buy a license.
Avatars - With text
License required
In order to get the source code for this component, you need to buy a license.
API reference
Avatar.Root
| Prop | Type | Default |
|---|---|---|
| size | xxs | xs | sm | md | lg | xl | xxl | md |
| variant | rounded | squared | rounded |
Avatar.Image accepts Radix Avatar image props such as src and alt. Avatar.TextFallback accepts Radix fallback props, including delayMs; Avatar.IconFallback renders the built-in profile illustration.