Avatar

Avatar component with different shapes, sizes, borders, statuses, fallbacks, and groups.

Basic

<Avatar src="/images/avatar-1.png" alt="John Doe" size="sm" />
<Avatar src="/images/avatar-2.png" alt="Jane Smith" size="md" />
<Avatar src="/images/avatar-3.png" alt="Mike Johnson" size="lg" />

With initials

<Avatar initials="JD" size="sm" />
<Avatar initials="AS" size="md" />
<Avatar initials="MJ" size="lg" />

With status

<Avatar src="/images/avatar-4.png" status="online" size="md" />
<Avatar initials="OF" status="offline" size="md" />

Verified

<Avatar src="/images/avatar-3.png" verified size="md" />
<Avatar initials="VU" verified size="lg" />

Profile photo

Large, ringed avatar for user profiles with extended size options.

<Avatar variant="profile" src="/images/avatar-1.png" alt="Profile photo 1" size="profile-sm" />
<Avatar variant="profile" src="/images/avatar-2.png" alt="Profile photo 2" size="profile-md" />
<Avatar variant="profile" src="/images/avatar-3.png" alt="Profile photo 3" size="profile-lg" />

Profile photo with fallback

<Avatar variant="profile" initials="PS" size="profile-sm" />
<Avatar variant="profile" placeholderIcon={User01} size="profile-md" />
<Avatar variant="profile" src="https://broken-url.jpg" initials="BI" size="profile-lg" />

Sizes

<Avatar initials="XS" size="xxs" />
<Avatar initials="XS" size="xs" />
<Avatar initials="SM" size="sm" />
<Avatar initials="MD" size="md" />
<Avatar initials="LG" size="lg" />
<Avatar initials="XL" size="xl" />
<Avatar initials="2X" size="2xl" />

Focusable

<a href="#">
  <Avatar src="/images/avatar-1.png" alt="Clickable avatar" focusable size="md" />
</a>

No contrast border

<Avatar src="/images/avatar-2.png" contrastBorder={false} size="md" />
<Avatar initials="NC" contrastBorder={false} size="md" />

With custom badge

<Avatar
  src="/images/avatar-4.png"
  size="md"
  customBadge={
    <div className="absolute -right-1 -bottom-1 size-4 rounded-full bg-utility-blue-500 flex items-center justify-center">
      <span className="text-white text-xs">+</span>
    </div>
  }
/>

Fallback

<Avatar src="https://broken-url.jpg" initials="BI" size="md" />
<Avatar src="https://another-broken-url.jpg" size="md" />

AvatarLabel

Rhye

rhye@untitledui.com

 
<AvatarLabel
    size="md"
    src="/images/avatar-4.png"
    alt="Rhye"
    title="Rhye"
    subtitle="rhye@untitledui.com"
/>

AvatarGroup


<div className="flex gap-2">
    <AvatarGroup 
        size="md" 
        max={4} 
        items={[
            { src: "/images/avatar-1.png", alt: "User 1" },
            { src: "/images/avatar-2.png", alt: "User 2" },
            { src: "/images/avatar-3.png", alt: "User 3" },
            { src: "/images/avatar-4.png", alt: "User 4" },
            { initials: "AB" },
            { initials: "CD" },
        ]} 
    />
    <AvatarAddButton size="md" />
</div>

API Reference

Avatar

Props	Type	Default	Description
src?	string	-	Image source
alt?	string	-	Alternative text
initials?	string	-	Fallback initials
size?	"xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "profile-sm" \| "profile-md" \| "profile-lg"	"md"	Avatar size, including profile variants.
variant?	"default" \| "profile"	"default"	Renders a default avatar or a profile photo variant with a ring.
status?	"online" \| "offline"	"offline"	Status indicator
verified?	boolean	false	Show verified check
focusable?	boolean	false	Adds a focusable style on the parent link.
contrastBorder?	boolean	true	Show a border that contrasts with the background. Only applicable to "profile" variant.
customBadge?	React.ReactNode	-	Custom badge element.
className?	string	-	Additional styles.

AvatarLabel

The following props and all Avatar props with size from md

Props	Type	Default	Description
title	string \| React.ReactNode	-	Avatar title.
subtitle	string \| React.ReactNode	-	Avatar subtitle.

AvatarGroup

Props	Type	Default	Description
items	Omit<AvatarProps, "size">[]	[]	Avatar items.
size?	AvatarProps["size"]	"md"	Avatar size, including profile variants.
max?	number	3	max number of displayed avatars.
className?	string	-	Additional group avatar styles.
avatarClassName?	string	-	Additional avatar styles.