Avatar

Base UICopy Anchor Link

Avatar shows a person or entity in a fixed circular frame. Pass src and alt when a photo exists; always supply fallback (initials or a short node) so Base UI can render that layer when the image is missing or fails.

size picks the footprint and scales the fallback label through the shared Text map. The root stays a non-growing span, so avatars hold steady in toolbars and list rows. Pair a single face with a name in Stack; use AvatarGroup when several identities should overlap on one line.

When to useCopy Anchor Link

• One person or entity face beside a name, row, or menu trigger
• Photo when a URL exists; initials only as the image-error path

When not to useCopy Anchor Link

• Several overlapping collaborators → AvatarGroup
• A clickable chrome control with no face → IconButton

RelatedCopy Anchor Link

• AvatarGroup — overlapping faces with overflow
• Badge — status dot on an avatar
• Stack — name + avatar rows

Common examplesCopy Anchor Link

Face beside nameCopy Anchor Link

A photo next to a name is the usual row. Always pass fallback even when src is set — that layer is the image-error path, not a second visual for people who already have a photo.

Missing imageCopy Anchor Link

Omit src only when teaching initials. The required fallback then becomes the visible face.

Two sizesCopy Anchor Link

Default size is s. Reach for m when the face needs a bit more presence in a toolbar — skip an xs-through-l catalog.

Ask your agentCopy Anchor Link

Show an avatar before each name in this member list. Use profile photos when URLs exist; otherwise initials. Keep avatars non-interactive — navigation belongs on the row or a separate button.