When to use it

Use Avatar anywhere a person, reviewer, or account needs a compact visual identity. It fits naturally in account menus, testimonial cards, review summaries, and team or author lists.

The component is intentionally simple. Most of the final look comes from the surrounding layout, the chosen size, and the fallback content.

Slot strategy

• Avatar is the outer frame.
• AvatarImage renders the real image when one is available.
• AvatarFallback gives you initials, a short label, or an icon when the image is missing.

Always provide a fallback. It keeps the UI stable and still communicates identity when the image does not load.

Behavior and theming guidance

Set size on the root with layout classes like size-8 or size-10 instead of rewriting the internal structure. Keep fallback text short so it stays legible at small sizes.

For accessible use, give the image a meaningful alt when it adds identity. If the nearby text already names the person, keep the alt brief and avoid repeating long labels.