Skip to main content

Avatar

Profile image or initials fallback in sm, md, and lg sizes, with optional upload-on-hover overlay.

Initials

Image

Sample user avatar

Upload on hover

Loading

Loading avatar
Loading avatar
Loading avatar
Loading item
Loading item

Stacked row

Fourth teammate

With label

Nora Lee

Editor · Online

Animation variants

animationVariant — click each control to compare press feedback.

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
sizeOptional"sm" | "md" | "lg"mdDiameter.
src / altOptionalstring—Image source and alt text.
initialsOptionalstring—Fallback when no image.
uploadableOptionalbooleanfalseHover/focus overlay with upload icon and hidden file input.
uploadLabelOptionalstringUploadButton aria-label when uploadable (overlay is icon-only).
onUploadOptional(file: File) => void—Called when the user picks a file.
acceptOptionalstringimage/*File input accept attribute.
disabledOptionalboolean—Disables upload interaction.
AvatarSkeletonOptionalcomponent—Colocated loading preset — sm / md / lg circle, aria-busy.
AvatarRowSkeletonOptionalcomponent—Avatar circle + two text lines for list rows.
animationVariantOptionalPressAnimationVariantdefaultPress animation — default, none, ripple, scale, sink, lift, pulse, or glow.