mielui
Status and content

Avatar

An image with initials as a fallback. Comes in two shapes and several sizes.

Installation

pnpm dlx @mielui/svelte add avatar

Usage

Fallback shows while the image loads, stays when it fails, and returns when the Image is removed. Changing src, srcset, or sizes starts a new request. Your own onload and onerror handlers still run.

<script lang="ts">
    import * as Avatar from '@mielui/svelte/components/avatar';
</script>

<Avatar.Root>
    <Avatar.Image src="/avatar.jpg" alt="Alex Morgan" />
    <Avatar.Fallback>AM</Avatar.Fallback>
</Avatar.Root>

Examples

Team list

A large avatar with a photo heads the list, and small initials mark each member.

Sizes

Shapes

Image unavailable

Parts

Put initials or an icon in Fallback's children. Leave Image's alt empty when the name is already shown beside the avatar.

Every part takes class. Root and Fallback render their children, and Image passes img attributes such as srcset and loading to the image.

API reference

Avatar.Root

Provides the avatar container.

  • size
    "sm" | "md" | "lg" | "xl"

    Diameter of the avatar.

    Default 'md'

  • shape
    "circle" | "square"

    Outline of the avatar.

    Default 'circle'

  • children
    Snippet<[]>

    Content rendered inside.

  • class
    string

    Classes added to the element.

Avatar.Fallback

Renders fallback avatar content.

  • children
    Snippet<[]>

    Content rendered inside.

  • class
    string

    Classes added to the element.

Avatar.Image

Renders the avatar image.

  • src
    string

    Image address.

  • alt
    string

    Image description. Leave it empty when the name is shown beside the avatar.

    Default ''

  • class
    (string & (ClassValue | null))

    Classes added to the element.

  • children
    Snippet<[]>

    Content rendered inside.