Avatar

An image element with a fallback for representing the user.

RH
SH
UI

Features

  • Automatic & manual control over image rendering
  • Fallback supports any children elements
  • Optionally delay fallback rendering to avoid flashes

Anatomy

  • Image: The image element that displays the user's profile picture
  • Fallback: The fallback element that displays while the image loads or if the image fails to load

API Reference

createAvatar

The builder function used to create the avatar component.

Props

Prop Default Type / Description
src ''
string

The source of the image to display.
delayMs 0
number

The amount of time in milliseconds to wait before displaying the image.
loadingStatus -
Writable<'loading' | 'loaded' | 'error'>

An optional writable store used to control the loading status of the image.

See Bring Your Own Store

onLoadingStatusChange -
ChangeFn<'loading' | 'loaded' | 'error'>

A callback invoked when the loading status store of the avatar changes.

See Change Functions

Elements

Element Description

The builder store used to create the the image element.

The builder store used to create the fallback element.

States

State Description
loadingStatus

A writable store with the current loading status of the image.

Options

Option Description
src

The source of the image to display.
delayMs

The amount of time in milliseconds to wait before displaying the image.

image

The image element that is rendered when the src prop is provided.

Data Attributes

Data Attribute Value
[data-melt-avatar-image]

Present on all avatar image elements.

fallback

The fallback element that is rendered before the image loads or if it fails to load.

Data Attributes

Data Attribute Value
[data-melt-avatar-fallback]

Present on all avatar fallback elements.