Orbit

Avatar

Source

A circular user image that falls back to initials when no image is provided or the image fails to load.

With image

Provide an avatar_url to render the image. The image fades in once loaded to avoid a flash of fallback text.

<Avatar name="Mona Lisa" avatar_url="https://avatars.githubusercontent.com/u/1?v=4" />

Initials fallback

When avatar_url is null the component shows initials derived from name.

<Avatar name="Ada Lovelace" avatar_url={null} />
<Avatar name="Grace Hopper" avatar_url={null} />

Sizes

The avatar defaults to a 24px circle. Set the rendered size with className and pass matching height and width for the image.

<Avatar name="Mona Lisa" avatar_url={url} height={24} width={24} />
<Avatar name="Mona Lisa" avatar_url={url} height={40} width={40} className="h-10 w-10" />
<Avatar name="Mona Lisa" avatar_url={url} height={64} width={64} className="h-16 w-16" />

Loading attribute

Set loading to lazy to defer offscreen avatar images.

loading="lazy"

Props

name

string

required

Used for the alt text and to derive initials when no image is shown.

avatar_url

string | null

required

Image source. Pass null to render the initials fallback. A failed load also falls back to initials.

height

number

Intrinsic image height passed to the underlying image.

width

number

Intrinsic image width passed to the underlying image.

"eager" | "lazy"default: 'eager'

Native image loading attribute.

CustomImageComponent

ElementType<any, keyof JSX.Intr…

Optional replacement for the img element, for example a framework Image component.

className

string

Classes merged onto the avatar container. Use to set the rendered size.