Melt UI Logo

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

Props

Prop Default Type / Description
src ''
string

The URL of the image to render.
delayMs undefined
number

The number of milliseconds to wait before rendering the fallback image.

Returned Props

Returned Prop Type Description
image
-

The builder store used to create the image element.
fallback
-

The builder store used to create the fallback element.

image

Data Attributes

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

Present on all avatar image elements.

fallback

Data Attributes

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

Present on all avatar fallback elements.