Avatar

Circular (or rounded) user image with a text fallback when the image fails or hasn't loaded.

With image + fallback

SCDZ

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>SC</AvatarFallback>
</Avatar>

Sizes

DZDZDZDZDZDZ

<Avatar size="xs"><AvatarFallback>DZ</AvatarFallback></Avatar>
<Avatar size="sm"><AvatarFallback>DZ</AvatarFallback></Avatar>
<Avatar size="md"><AvatarFallback>DZ</AvatarFallback></Avatar>
<Avatar size="lg"><AvatarFallback>DZ</AvatarFallback></Avatar>
<Avatar size="xl"><AvatarFallback>DZ</AvatarFallback></Avatar>
<Avatar size="2xl"><AvatarFallback>DZ</AvatarFallback></Avatar>

Rounded shape

SCSCSCSC

<Avatar shape="rounded">
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback shape="rounded">SC</AvatarFallback>
</Avatar>

Props

Component	Notable props
Avatar	size: xs \| sm \| md \| lg \| xl \| 2xl (default md). shape: circle \| rounded (default circle).
AvatarImage	src, alt, onLoadingStatusChange, shape
AvatarFallback	delayMs, size, shape — text size scales with avatar size

Source

packages/react/src/components/avatar.tsx · Figma node 2814:11241 · built on @radix-ui/react-avatar