base-ui-svelte
GitHub (opens in new tab)

Avatar

An image element with a fallback for representing the user.

View as Markdown

Sizes

Avatar.Image keepMounted

Set keepMounted when a stacked fallback or image optimizer needs the <img> node to stay in the DOM even after a load error.

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Avatar.Root

Displays a user's profile picture, initials, or fallback icon. Renders a <span> element.

Props

children snippet —
Name
children
Description

Content rendered inside the part.

Type
Snippet

Avatar.Fallback

Rendered when the image fails to load or when no image is provided. Renders a <span> element.

Props

delay number 0
Name
delay
Description

How long to wait before showing the fallback. Specified in milliseconds.

Type
number
Default
0
children snippet —
Name
children
Description

Content rendered inside the part.

Type
Snippet

Avatar.Image

The image to be displayed in the avatar. Renders an <img> element.

Props

onLoadingStatusChange function —
Name
onLoadingStatusChange
Description

Callback fired when the loading status changes.

Type
((status: ImageLoadingStatus) => void) | undefined
keepMounted boolean false
Name
keepMounted
Description

When true, keep the image element mounted even after an error (useful for stacked fallbacks and image optimizers that need the node present).

Type
boolean
Default
false