Avatar
An image element with a fallback for representing the user.
Installation
Usage
<Avatar>
<Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
<Avatar.Fallback> {"CN"->React.string} </Avatar.Fallback>
</Avatar>Examples
Basic
A basic avatar component with an image and a fallback.
Badge
Use the Avatar.Badge component to add a badge to the avatar. The badge is positioned at the bottom right of the avatar.
Use the className prop to add custom styles to the badge such as custom colors, sizes, etc.
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback> {"CN"->React.string} </AvatarFallback>
<AvatarBadge className="bg-green-600 dark:bg-green-800" />
</Avatar>Badge with Icon
You can also use an icon inside <Avatar.Badge>.
Avatar Group
Use the Avatar.Group component to add a group of avatars.
Avatar Group Count
Use <Avatar.GroupCount> to add a count to the group.
Avatar Group with Icon
You can also use an icon inside <Avatar.GroupCount>.
Sizes
Use the size prop to change the size of the avatar.
Dropdown
You can use the Avatar component as a trigger for a dropdown menu.
API Reference
Avatar
The Avatar component is the root component that wraps the avatar image and fallback.
AvatarImage
The Avatar.Image component displays the avatar image. It accepts all Base UI Avatar Image props.
AvatarFallback
The Avatar.Fallback component displays a fallback when the image fails to load. It accepts all Base UI Avatar Fallback props.
AvatarBadge
The Avatar.Badge component displays a badge indicator on the avatar, typically positioned at the bottom right.
Avatar.Group
The Avatar.Group component displays a group of avatars with overlapping styling.
AvatarGroupCount
The AvatarGroupCount component displays a count indicator in an avatar group, typically showing the number of additional avatars.
For more information about Base UI Avatar props, see the Base UI documentation.