Component

Avatar

Circular avatar (wraps Base UI Avatar) with an automatic initials fallback, plus Avatar Group for overlapping stacks.

Sizes

KYKYKY

PNAC

Fallback shows automatically while the image loads or on error; it accepts initials or any icon node

tone colours the fallback behind initials or an icon, using the same five tones as Badge. It has no effect once a photo loads.

KYPNKSMRAI

Derive the tone from something stable, such as a user id, so a person keeps the same colour

Composed with a small positioned dot, the same pattern as Status Indicator.

Prop	Type	Default	Description
alt	string	""	Alternative text for the image.
fallback	React.ReactNode	None	Fallback content (initials or icon) shown while loading or on error.
size	ComponentSize	"md"	Diameter, matching the control scale used elsewhere.
src	string	None	Image URL. On a load error the `fallback` takes over.
tone	ComponentTone	"default"	Background/text color behind the fallback content. Default "default".

alt""

string

Alternative text for the image.

fallbackNone

React.ReactNode

Fallback content (initials or icon) shown while loading or on error.

size"md"

ComponentSize

Diameter, matching the control scale used elsewhere.

srcNone

string

Image URL. On a load error the `fallback` takes over.

tone"default"

ComponentTone

Background/text color behind the fallback content. Default "default".

Also accepts everything from React.ComponentPropsWithoutRef<typeof import("@base-ui/react/avatar").Avatar.Root>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent