Avatar

Avatar manages the loading state of an image and automatically shows a fallback (e.g., initials, icon, placeholder) if the image fails to load or takes too long. It is commonly used for user profile pictures.

Usage

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

export default function Example() {
  return (
    <Avatar>
      <AvatarImage src="https://example.com/user.jpg" alt="User" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  );
}

Sub-components

• AvatarImage — Image element; only renders when image successfully loads
• AvatarFallback — Fallback content shown when image is loading, failed, or not provided

Props

Examples

Accessibility

• Image must have an alt attribute for screen readers.
• Fallback is announced only if the image fails to load.
• Use short, descriptive alt text (e.g., "User avatar" or the user's name).

Best practices

• Use delayMs to avoid flashing the fallback for fast-loading images (e.g., 600ms).
• Fallback content should be text (initials) or an icon, not another image.
• Provide a consistent fallback size that matches the image size.
• Consider using a default avatar background color to distinguish fallbacks.