TRA SummitDesign System

Avatar

User profile image with initials fallback.

Sizes

ARARARARAR
<Avatar size="xs"><AvatarFallback>AR</AvatarFallback></Avatar>
<Avatar size="sm"><AvatarFallback>AR</AvatarFallback></Avatar>
<Avatar size="md"><AvatarFallback>AR</AvatarFallback></Avatar>
<Avatar size="lg"><AvatarFallback>AR</AvatarFallback></Avatar>
<Avatar size="xl"><AvatarFallback>AR</AvatarFallback></Avatar>

With image

JD
<Avatar>
  <AvatarImage src="/avatar.jpg" alt="User" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Avatar group

ARJDMK+2
<AvatarGroup max={3}>
  <Avatar size="md"><AvatarFallback>AR</AvatarFallback></Avatar>
  <Avatar size="md"><AvatarFallback>JD</AvatarFallback></Avatar>
  <Avatar size="md"><AvatarFallback>MK</AvatarFallback></Avatar>
  <Avatar size="md"><AvatarFallback>TS</AvatarFallback></Avatar>
  <Avatar size="md"><AvatarFallback>LP</AvatarFallback></Avatar>
</AvatarGroup>