Components

Avatar

Identifies a person or company with a picture, or with initials when there is none, and an optional status dot.

28 October 2026

Added

First version: Avatar with the Avatar.Image, Avatar.Fallback, Avatar.Status and Avatar.Group parts.
size (24, 32, 40, 48, 64 px), kind (person, company), shape (circle, square) and status (online, offline, busy).
Initials are upper-cased for the Provider language; the fallback colour comes from the name.
The picture fades in with motion.reveal; delay holds the fallback back.
decorative, the accessible name and the status strings (ui.avatar.*).
avatar.size.* and avatar.status-size.* component tokens.
The part prop types are exported: AvatarImageProps, AvatarFallbackProps, AvatarStatusProps, AvatarGroupProps.

Changed

The initials fallback takes one of seven pastel tag pairs, derived from the name.