Avatar
A user or contact image with a text fallback and grouping.
Image and fallback
A photo with an initials fallback, beside a fallback-only avatar.
JNPS
Group with overflow
Overlapping avatars with a trailing overflow count.
JNPSMR
+3
API reference
A user or contact image with a text fallback. Compose Avatar with AvatarImage + AvatarFallback; stack them in an AvatarGroup with an overflow count.
Full props on Base UI AvatarAnatomy
Avatar | Rounded image container; accepts a size prop (default/sm/lg). |
AvatarImage | The photo; covers the avatar once it loads. |
AvatarFallback | Shown when no image loads — usually initials. |
AvatarGroup | Overlaps child avatars with ring separators. |
AvatarGroupCount | Trailing chip showing an overflow count (e.g. +3). |
AvatarBadge | A small status dot pinned to the avatar corner. |