Components

Avatar

Circular container for a user identity. Shows a photo when available; otherwise falls back to a single letter on a muted background. Built on Radix Avatar.

Updated Jul 10, 2026 by Leonardo Posada

Variants

JY
<Avatar>
  <AvatarFallback>J</AvatarFallback>
</Avatar>

<Avatar>
  <AvatarImage src="/julian.png" alt="Julián Núñez" />
  <AvatarFallback>J</AvatarFallback>
</Avatar>

Sizes

JJJJ
<Avatar className="size-6">
  <AvatarFallback>J</AvatarFallback>
</Avatar>

<Avatar>
  <AvatarFallback>J</AvatarFallback>
</Avatar>

<Avatar className="size-10">
  <AvatarFallback>J</AvatarFallback>
</Avatar>

<Avatar className="size-14">
  <AvatarFallback>J</AvatarFallback>
</Avatar>

One letter only

Yuno avatars display exactly one uppercase letter as the fallback. If you pass a full name to AvatarFallback (e.g. 'Julián Núñez'), the component slices to the first character for you. Never override this rule with two-letter initials.
JJ
{/* String children get sliced to first char automatically */}
<Avatar>
  <AvatarFallback>Julián Núñez</AvatarFallback>
</Avatar>

{/* Explicit single letter — same result, more intentional */}
<Avatar>
  <AvatarFallback>J</AvatarFallback>
</Avatar>

When to use

  • In the AccountMenu trigger and user card.
  • In tables or lists that display a user or account per row.
  • Anywhere identity needs to appear compactly.

When not to use

  • For decorative graphics — use an icon or illustration.
  • For status indicators — use Badge instead.
  • As the primary trigger for a menu with no identity context — a plain IconButton is enough.

Usage

Do
  • Single letter only inside the circle. Never pair of initials, never two letters.
  • Uppercase the fallback letter.
  • Provide alt text on AvatarImage so screen readers announce the user identity.
  • Match the ring color to the surface it sits on so the circle stays crisp.
Don't
  • Don't put text longer than one character inside the fallback.
  • Don't nest icons in the fallback for a user avatar — reserve that pattern for scope icons (Buildings, Storefront).
  • Don't color-code the fallback per user — the DS keeps them neutral (bg-muted).