Loading...
An avatar is a visual element used to represent a user, group, or entity in an interface. It can display a profile image, user initials, or a fallback icon when no image is available, providing quick visual identification.
Automatic and manual control over when the image renders
Fallback part accepts any children
Optionally delay fallback rendering to avoid content flashing
Animated Avatar tooltip
Customizable Avatar badge and status ring
Group avatars
Use any kind of custom Motion variants with AvatarTooltip, and any Tooltip variants or motion features with AvatarTooltipContent, to easily create custom animations for your avatars.
| Prop | Type | Default |
|---|---|---|
size | enum | "default" |
statusRing | enum | ― |
Support all Root Radix API.
Support all Image Radix API.
Support all Fallback Radix API.
| Prop | Type | Default |
|---|---|---|
status | enum | ― |
| Prop | Type | Default |
|---|---|---|
variants | object | ― |
transition | Transition | ― |
variant | enum | "default" |
| Prop | Type | Default |
|---|---|---|
reduceMotion | boolean | false |
animation | AnimationProps | ― |
animationPreset | enum | "motion-blur" |
transition | Transition | ― |
transitionPreset | enumTransitionPreset | "inOutQuad" |