Component

Avatar

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

Sizes

KYKYKY

KYAC

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

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

ABC+1

ABC

AB+1

Prop	Type	Default	Description
src / fallback	string \| ReactNode	None	Image source and accessible fallback.
size	"sm" \| "md" \| "lg"	"md"	Avatar dimension.
tone	ComponentTone	"default"	Background/text color behind the fallback content.
className	string	None	Additional classes applied to the component root.

src / fallbackNone

string | ReactNode

Image source and accessible fallback.

size"md"

"sm" | "md" | "lg"

Avatar dimension.

tone"default"

ComponentTone

Background/text color behind the fallback content.

classNameNone

string

Additional classes applied to the component root.