Studio
2

Avatar

Installation

pnpm dlx @mielui/svelte add avatar

Usage

Changing Image src, srcset, or sizes starts a new image request. Fallback remains available while images load or fail, and returns when the loaded Image is removed. Native onload and onerror callbacks run alongside the internal state updates.

import * as Avatar from '$lib/mielui/components/avatar';

<Avatar.Root>
  <Avatar.Image src="/avatar.jpg" alt="User" />
  <Avatar.Fallback>AB</Avatar.Fallback>
</Avatar.Root>

Examples

Sizes

Shapes

Image unavailable

API reference

Avatar.Root

Provides the avatar container.

Prop Type Default
size "sm" | "md" | "lg" | "xl" | undefined 'md'
shape "circle" | "square" | undefined 'circle'
children Snippet<[]> | undefined —
class string | undefined —

Avatar.Fallback

Renders fallback avatar content.

Prop Type Default
children Snippet<[]> | undefined —
class string | undefined —

Avatar.Image

Renders the avatar image.

Prop Type Default
src string | undefined —
alt string | undefined ''
class (string & (ClassValue | null)) | undefined —
children Snippet<[]> | undefined —