Avatar

The Avatar component displays an image via AvatarImage and falls back to AvatarFallback content when the image is unavailable. The fallback is always rendered behind the image, so it appears seamlessly if the image fails to load.

When no AvatarImage is provided, the AvatarFallback displays initials or other placeholder content automatically. This is useful for users who have not uploaded a profile picture, providing a recognizable identifier using their initials.

Use the Size parameter to control avatar dimensions. Available sizes are Small (32px, for compact lists), Default (40px, standard usage), Large (48px, for profile headers), and ExtraLarge (64px, for profile pages).

Use the ShowDot parameter to display a built-in dot indicator on the avatar. Customize the dot color with DotClass (e.g., "bg-green-500" for online, "bg-yellow-500" for away). The dot defaults to bg-primary if no DotClass is provided.

Use the AvatarGroup component to display multiple avatars with an overlapping layout. Avatars inside the group automatically receive a border ring via the AvatarGroupContext cascading parameter. Add a final avatar with a "+N" count to indicate additional members.

Use the Class parameter on Avatar and AvatarFallback to create custom styled avatars with gradient backgrounds, custom border colors, or different shapes. Override the default rounded-full with rounded-lg for square avatars.

A real-world composition pattern showing an avatar alongside user information inside a Card. This pattern is common in user profile sections, team member lists, and comment threads where identity context is important.