Skip to main content

Avatar

Avatar

User profile image with fallback support

Tags: component display user

View Demo

Avatar displays a user's profile image with automatic fallback to initials when the image fails to load.

Import​

<script>
  import { Avatar, AvatarImage, AvatarFallback } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<Avatar>
  <AvatarImage src="/avatar.jpg" alt="John Doe" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Props​

Avatar​

Prop Type Default Description
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md' Size of the avatar
delayMs number - Delay before showing fallback
class string - Additional CSS classes

AvatarImage​

Prop Type Default Description
src string - Image source URL
alt string - Alt text for the image

AvatarFallback​

Prop Type Default Description
class string - Additional CSS classes

Sizes​

<Avatar size="xs"><!-- 24px --></Avatar>
<Avatar size="sm"><!-- 32px --></Avatar>
<Avatar size="md"><!-- 40px --></Avatar>
<Avatar size="lg"><!-- 48px --></Avatar>
<Avatar size="xl"><!-- 64px --></Avatar>
Size Dimensions Use Case
xs 24x24px Compact lists
sm 32x32px Comments, mentions
md 40x40px Default, navigation
lg 48x48px Profile cards
xl 64x64px Profile pages

Fallback Behavior​

When the image fails to load, the fallback content is displayed:

<Avatar>
  <AvatarImage src="/broken-link.jpg" alt="User" />
  <AvatarFallback>AB</AvatarFallback>
</Avatar>

Fallback with Delay​

Prevent flash of fallback for slow-loading images:

<Avatar delayMs={500}>
  <AvatarImage src="/slow-image.jpg" alt="User" />
  <AvatarFallback>AB</AvatarFallback>
</Avatar>

Generating Initials​

Create initials from a user's name:

<script>
  function getInitials(name: string): string {
    return name
      .split(' ')
      .map((part) => part[0])
      .join('')
      .toUpperCase()
      .slice(0, 2);
  }

  const userName = 'John Doe';
</script>

<Avatar>
  <AvatarImage src={user.avatar} alt={userName} />
  <AvatarFallback>{getInitials(userName)}</AvatarFallback>
</Avatar>

Icon Fallback​

Use an icon instead of initials:

<Avatar>
  <AvatarImage src={avatarUrl} alt="User" />
  <AvatarFallback>
    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
      />
    </svg>
  </AvatarFallback>
</Avatar>

Accessibility​

  • Always provide alt text for avatar images
  • The fallback is decorative when the image is present
  • Use meaningful alt text that describes the user

Examples​

User Profile​

<div class="flex items-center gap-3">
  <Avatar size="lg">
    <AvatarImage src={user.avatar} alt={user.name} />
    <AvatarFallback>{getInitials(user.name)}</AvatarFallback>
  </Avatar>
  <div>
    <p class="font-medium">{user.name}</p>
    <p class="text-sm text-muted-foreground">{user.email}</p>
  </div>
</div>

Avatar Stack​

<div class="flex -space-x-2">
  {#each users as user}
    <Avatar size="sm" class="border-2 border-background">
      <AvatarImage src={user.avatar} alt={user.name} />
      <AvatarFallback>{getInitials(user.name)}</AvatarFallback>
    </Avatar>
  {/each}
  {#if moreCount > 0}
    <Avatar size="sm" class="border-2 border-background">
      <AvatarFallback>+{moreCount}</AvatarFallback>
    </Avatar>
  {/if}
</div>

Comment Avatar​

<div class="flex gap-3">
  <Avatar size="sm">
    <AvatarImage src={comment.author.avatar} alt={comment.author.name} />
    <AvatarFallback>{getInitials(comment.author.name)}</AvatarFallback>
  </Avatar>
  <div class="flex-1">
    <p class="font-medium text-sm">{comment.author.name}</p>
    <p class="text-sm">{comment.text}</p>
  </div>
</div>
<button class="flex items-center gap-2">
  <Avatar size="sm">
    <AvatarImage src={currentUser.avatar} alt={currentUser.name} />
    <AvatarFallback>{getInitials(currentUser.name)}</AvatarFallback>
  </Avatar>
  <span class="text-sm">{currentUser.name}</span>
</button>

Colored Fallbacks​

<script>
  function getColorFromName(name: string): string {
    const colors = ['bg-red-500', 'bg-blue-500', 'bg-green-500', 'bg-yellow-500', 'bg-purple-500'];
    const index = name.charCodeAt(0) % colors.length;
    return colors[index];
  }
</script>

<Avatar>
  <AvatarImage src={user.avatar} alt={user.name} />
  <AvatarFallback class={getColorFromName(user.name)}>
    {getInitials(user.name)}
  </AvatarFallback>
</Avatar>
  • Badge - For status indicators
  • Card - For user profile cards
On this page