Avatar

A composable user or entity portrait with automatic image-to-fallback handling.

When to use

• User profiles — navigation bars, comment threads, team lists.
• Entity representation — company logos, workspace icons.
• Grouped lists — participant avatars in a meeting or channel.

When NOT to use

• For decorative illustrations unrelated to an entity — use a plain <img>.
• For icons or badges — use Badge or an icon component.

Import

import { Avatar, AvatarImage, AvatarFallback } from '@mihcm/ui/Avatar';

Basic usage

<Avatar>
  <AvatarImage src="/people/photos/jane-doe.jpg" alt="Jane Doe" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

The image renders first. If it fails to load, the fallback shows automatically.

Sizes

Composition

• AvatarFallback is always in the DOM behind the image so layout never shifts on load failure.
• Use initials (1-2 characters) or an icon as fallback content.

Related

• Badge — status indicator that can overlay an avatar.