Avatar

Usage

Basic Avatar with Initials

import { Avatar } from "@prisma-docs/eclipse";

export function UserProfile() {
  return <Avatar format="initials">JD</Avatar>;
}

Live Example:

Avatar with Image

import { Avatar } from "@prisma-docs/eclipse";

export function UserProfileImage() {
  return (
    <Avatar 
      format="image" 
      src="/avatar.jpg" 
      alt="John Doe" 
      size="lg" 
    />
  );
}

Live Example:

Avatar with Icon

import { Avatar } from "@prisma-docs/eclipse";

export function IconAvatar() {
  return (
    <Avatar format="icon" size="2xl">
      <UserIcon />
    </Avatar>
  );
}

Live Example:

Disabled State

import { Avatar } from "@prisma-docs/eclipse";

export function DisabledAvatar() {
  return (
    <Avatar 
      format="image" 
      src="/avatar.jpg" 
      alt="Disabled user" 
      size="lg" 
      disabled 
    />
  );
}

Avatar Props

• format - The type of avatar content: "image", "icon", or "initials" (required)
• size - Avatar size: "lg" (28x28, default), "xl" (32x32), "2xl" (36x36), "3xl" (40x40)
• disabled - Whether the avatar is disabled: true or false (default: false)
• src - Image source URL (required when format is "image")
• alt - Alt text for image (optional, recommended for accessibility)
• children - Content for icon or initials format
• className - Additional CSS classes (optional)

Formats

Image Avatar

Display a user photo or image:

<Avatar 
  format="image" 
  src="/user-photo.jpg" 
  alt="User Name" 
  size="xl" 
/>

Initials Avatar

Display user initials (typically 1-2 characters):

<Avatar format="initials" size="xl">
  JD
</Avatar>

Icon Avatar

Display an icon or SVG:

<Avatar format="icon" size="2xl">
  <UserIcon />
</Avatar>

Sizes

The Avatar component supports four sizes:

• lg - 28x28 pixels (default)
• xl - 32x32 pixels
• 2xl - 36x36 pixels
• 3xl - 40x40 pixels

<div className="flex items-center gap-4">
  <Avatar format="initials" size="lg">SM</Avatar>
  <Avatar format="initials" size="xl">MD</Avatar>
  <Avatar format="initials" size="2xl">LG</Avatar>
  <Avatar format="initials" size="3xl">XL</Avatar>
</div>

Features

• ✅ Three display formats: image, icon, and initials
• ✅ Four size variants
• ✅ Disabled state support
• ✅ Built with Eclipse design tokens
• ✅ Accessible with proper alt text support
• ✅ Circular shape with consistent styling

Best Practices

• Use the image format when you have a user photo available
• Use the initials format for personalization without photos
• Use the icon format for generic user representations or system avatars
• Always provide alt text when using the image format for accessibility
• Keep initials to 1-2 characters for best visual appearance
• Choose appropriate sizes based on UI context (smaller for lists, larger for profiles)
• Use the disabled state to indicate inactive or unavailable users

Accessibility

• When using format="image", always provide an alt attribute
• The component uses semantic HTML for proper screen reader support
• Disabled avatars have appropriate visual indicators