Skip to content

Avatar

A round user picture that falls back to initials on a stable hue.

Group: Media · Kind: native · in the lite catalog

exampleJD
size · smJD
size · lgJD

Open in the playground

The same specimen painted by React, SwiftUI, Compose and gpui.

exponential-ui-avatar on Web
exponential-ui-avatar on iOS
exponential-ui-avatar on Android
exponential-ui-avatar on Desktop
Prop Type Required Bindable Description
name string yes yes The person’s name; initials come from it.
src url – yes The picture URL.
size sm | default | lg – – Diameter class. Default "default".
seed string – – Hashes the fallback hue; defaults to the name.

None.

None.

none

The basic catalog’s Image (avatar) renders as Avatar.

A native component: every renderer paints it directly.

Role: img

img (name)

Not focusable; no keys.

Recipe parts: Avatar/root Avatar/image Avatar/fallback

Keyed by: size :hover :pressed :focus :disabled :checked :open :selected :invalid :dragover

Themes · Write a theme

CallSurface · Image · ZoomableImage · Icon · Video · AudioPlayer · QrCode · Carousel