Avatar - Prisma — ContextQMD

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

Usage

Basic Avatar with Initials

tsx

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

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

Live Example:

Avatar with Image

tsx

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

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

Live Example:

Avatar with Icon

tsx

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

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

Live Example:

Disabled State

tsx

import { Avatar } from "@prisma/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:

tsx

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

Initials Avatar

Display user initials (typically 1-2 characters):

tsx

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

Icon Avatar

Display an icon or SVG:

tsx

<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

tsx

<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