Avatar

Stable

An image element with a fallback for representing the user or entity.

Examples

Sizes & Images

tsx
<div className="flex items-end gap-4">
  <Avatar size="sm" src="https://i.pravatar.cc/150?u=1" />
  <Avatar size="md" src="https://i.pravatar.cc/150?u=2" />
  <Avatar size="lg" src="https://i.pravatar.cc/150?u=3" />
  <Avatar size="xl" src="https://i.pravatar.cc/150?u=4" />
</div>

Fallbacks & Rings

When the image fails to load or isn't provided, initials are shown.

AU
GA
SN
tsx
<div className="flex gap-4">
  <Avatar name="Admin User" ring="cyan" />
  <Avatar name="Guest Account" ring="purple" />
  <Avatar name="System Node" ring="white" />
</div>

Status Indicators

tsx
<div className="flex gap-4">
  <Avatar src="..." status="online" />
  <Avatar src="..." status="idle" />
  <Avatar src="..." status="busy" />
  <Avatar src="..." status="offline" />
</div>

Avatar Group

Alice
Bob
Charlie
+2
tsx
<AvatarGroup 
  max={3}
  size="lg"
  ring="cyan"
  avatars={[
    { src: '...', name: 'Alice' },
    { src: '...', name: 'Bob' },
    { src: '...', name: 'Charlie' },
    { name: 'Dave' },
    { name: 'Eve' }
  ]}
/>

API Reference

PropertyDescriptionTypeDefault
sizeThe dimensions of the avatar."xs" | "sm" | "md" | "lg" | "xl" | "2xl""md"
ringOuter ring glow color."none" | "cyan" | "purple" | "green" | "white""none"
statusA status dot to render on the bottom right."online" | "idle" | "busy" | "offline"-
nameUsed to calculate fallback initials when src is missing.string-