Avatar

Sizes

<Avatar size="sm"><AvatarFallback>FM</AvatarFallback></Avatar>
<Avatar size="md"><AvatarFallback>FM</AvatarFallback></Avatar>
<Avatar size="lg"><AvatarFallback>FM</AvatarFallback></Avatar>
<Avatar size="xl"><AvatarFallback>FM</AvatarFallback></Avatar>

Tones

<Avatar><AvatarFallback tone="silver">AL</AvatarFallback></Avatar>
<Avatar><AvatarFallback tone="red">CD</AvatarFallback></Avatar>
<Avatar><AvatarFallback tone="dark">EF</AvatarFallback></Avatar>

Group (stacked)

<AvatarGroup>
  <Avatar><AvatarFallback>AN</AvatarFallback></Avatar>
  <Avatar><AvatarFallback tone="red">BR</AvatarFallback></Avatar>
  <Avatar><AvatarFallback tone="dark">CL</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>DI</AvatarFallback></Avatar>
</AvatarGroup>

How Avatar works with assistive tech

Role

• img

Keyboard

• not interactive (unless wrapped in link/button)

ARIA attributes

• aria-label with person/team/tenant name

Focus behavior

• inherits from parent interactive wrapper

Initials are visual fallback; aria-label is authoritative. Tone color is decorative — never the only identifier.