Data Display

Avatar

Display user profile images with automatic initials fallback. Supports multiple sizes, custom fallback text, and style overrides.

Playground

Experiment with different props in real-time.

Size

Basic Usage

Pass a src and alt to display a user avatar.

<script lang="ts">
  import { Avatar } from 'sv5ui';
</script>

<Avatar src="https://i.pravatar.cc/300?u=1" alt="John Doe" />

Sizes

Avatars come in 9 sizes, from 3xs to 3xl.

<Avatar size="3xs" src="https://i.pravatar.cc/300?u=1" alt="User" />
<Avatar size="2xs" src="https://i.pravatar.cc/300?u=2" alt="User" />
<Avatar size="xs" src="https://i.pravatar.cc/300?u=3" alt="User" />
<Avatar size="sm" src="https://i.pravatar.cc/300?u=4" alt="User" />
<Avatar size="md" src="https://i.pravatar.cc/300?u=5" alt="User" />
<Avatar size="lg" src="https://i.pravatar.cc/300?u=6" alt="User" />
<Avatar size="xl" src="https://i.pravatar.cc/300?u=7" alt="User" />
<Avatar size="2xl" src="https://i.pravatar.cc/300?u=8" alt="User" />
<Avatar size="3xl" src="https://i.pravatar.cc/300?u=9" alt="User" />

With Initials

When no src is provided, initials are automatically generated from the alt prop.

<Avatar alt="John Doe" />
<Avatar alt="Alice Smith" />
<Avatar alt="Bob" />

Custom Fallback Text

Use the text prop to display custom fallback text instead of auto-generated initials.

<Avatar text="AB" />
<Avatar text="OK" />
<Avatar text="?" />

Styled Examples

Customize avatar appearance with the ui prop to override internal element classes.

<Avatar
  src="https://i.pravatar.cc/300?u=11"
  alt="Styled"
  ui={{
    root: 'ring-2 ring-primary ring-offset-2 ring-offset-surface',
  }}
/>
<Avatar
  alt="Custom Fallback"
  ui={{
    fallback: 'bg-primary text-on-primary',
  }}
/>

Custom Children

Use the children snippet to render fully custom content inside the avatar.

<Avatar size="lg">
  <Icon name="lucide:user" class="size-5" />
</Avatar>

<Avatar size="lg" ui={{ root: 'bg-primary text-on-primary' }}>
  <Icon name="lucide:star" class="size-5" />
</Avatar>

<Avatar size="lg" ui={{ root: 'bg-success text-on-success' }}>
  <Icon name="lucide:check" class="size-5" />
</Avatar>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	Root avatar container — controls size and shape
`image`	Image element — controls object-fit and rendering
`fallback`	Fallback element — shown when image is unavailable

Snippets

Name	Description
`children`	Custom content inside the avatar — overrides image, text, and icon

Props

Prop	Type	Default
`size`	`'3xs' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'`	`'md'`
`src`	`string`	`-`
`alt`	`string`	`-`
`text`	`string`	`-`
`delayMs`	`number`	`0`
`class`	`string`	`-`
`ui`	`{ root, image, fallback }`	`-`

Accordion AvatarGroup