Avatar

Display user profile images with automatic fallback to initials. Supports various sizes and grouping.

Installation

Import

import { Avatar } from '@svelte-atoms/core/avatar';

Preset Configuration

Customize the avatar appearance using presets

You can customize the default styles for Avatar components by defining presets in your configuration:

Examples

Explore different avatar variations and use cases

Basic Avatar

Simple avatar with image

Code

<Avatar src="/avatar.jpg" alt="User name" />

Avatar Sizes

Different sizes for various contexts

Code

<Avatar size="sm" src="/avatar.jpg" alt="Small" />
<Avatar size="md" src="/avatar.jpg" alt="Medium" />
<Avatar size="lg" src="/avatar.jpg" alt="Large" />
<Avatar size="xl" src="/avatar.jpg" alt="Extra Large" />

Fallback Initials

Automatic initials when no image is provided

Code

<Avatar alt="John Doe" />
<Avatar alt="Jane Smith" />

Avatar Group

Display multiple avatars in a group

Code

<div class="flex -space-x-2">
  <Avatar src="/avatar1.jpg" alt="User 1" />
  <Avatar src="/avatar2.jpg" alt="User 2" />
  <Avatar src="/avatar3.jpg" alt="User 3" />
  <Avatar>+5</Avatar>
</div>

API Reference

Avatar Props

Prop

Type

Default

Description

class

string

Class

src

string | Component

Src

alt

string

Alt

Accessibility

Built-in Accessibility Features

• Proper alt text for images
• Meaningful fallback initials
• Adequate color contrast for initials
• Semantic img element usage
• ARIA labels when needed

Alert

Badge