Avatar — Design System

With image

import { Avatar, AvatarImage, AvatarFallback } from '@mihcm/ui/Avatar';
 
<Avatar size="md">
  <AvatarImage src="/people/photos/alex-kim.jpg" alt="Alex Kim" />
  <AvatarFallback>AK</AvatarFallback>
</Avatar>;

Fallback only

When no image is available, the fallback renders immediately.

<Avatar size="lg">
  <AvatarFallback>YS</AvatarFallback>
</Avatar>

Size variants

<div className="flex items-center gap-3">
  <Avatar size="sm">
    <AvatarFallback>S</AvatarFallback>
  </Avatar>
  <Avatar size="md">
    <AvatarFallback>M</AvatarFallback>
  </Avatar>
  <Avatar size="lg">
    <AvatarFallback>L</AvatarFallback>
  </Avatar>
  <Avatar size="xl">
    <AvatarFallback>XL</AvatarFallback>
  </Avatar>
</div>

Avatar group

Stack avatars with negative margin for a participant list.

<div className="flex -space-x-2">
  <Avatar size="sm" className="ring-2 ring-background">
    <AvatarImage src="/people/photos/jane-doe.jpg" alt="Jane Doe" />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
  <Avatar size="sm" className="ring-2 ring-background">
    <AvatarImage src="/people/photos/maya-chen.jpg" alt="Maya Chen" />
    <AvatarFallback>MC</AvatarFallback>
  </Avatar>
  <Avatar size="sm" className="ring-2 ring-background">
    <AvatarFallback>+3</AvatarFallback>
  </Avatar>
</div>