Avatar
A person's photo on a rounded plate, falling back to initials or an icon while it loads, when it fails, or when there is none. It is decorative beside a visible name; standing alone, give it aria-label so it reads as an image. Add AvatarContent with AvatarName (and an optional AvatarDescription) for the user item: plate and name in one row. To let people change it, make the avatar the FileUploadTrigger (asChild) and give it as='button' — picking only previews, and your form uploads.
Usage
Examples
Sizes
sm (20px) and md (24px, the nav-rail plate) are the compact sizes for user items; lg (32px,
the default) is for rows and forms. Each row shows a photo, initials and the icon, then the same
three inside a Branded frame.
With name
The user item (Figma 12557:5856): the plate and the name in one row, 6px apart. The name is
text-sm at every size and truncates with an ellipsis when the row is narrow.
With description
AvatarDescription adds a secondary line under the name — the email in the account menu. Both lines truncate.
Fallback
Initials are the first letters of the first and last word of name; without a name the person icon shows, whether the photo is missing or failed to load.
Custom icon
icon replaces the default person glyph whenever name gives no initials.
Branded
Inside a Branded frame the empty plate takes the brand tint and stroke, initials and the icon take the brand colour, and a photo is unchanged.
Click to upload
Click the avatar, or focus it and press Enter, to pick a photo — hover and focus show the edit icon, and the pick only previews until your form saves.
With actions
The settings-row pattern: explicit Remove and Replace buttons beside a plain avatar, with the accepted formats and size spelled out.
Uploading
While the new photo uploads, disable the trigger and force the overlay with visible so it holds a Loader.