Components

Avatar

A person or organization image with deterministic initials, shape, size, and presence fallbacks.

Images and fallbacks

Pass a source for a portrait and a name for its accessible label. A missing or failed image returns to generated initials automatically.

tsx

<Avatar name="Maya Chen" src={portraitUrl} />
<Avatar name="Grace Hopper" shape="square" />
<Avatar name="Lin Chen" initials="LC" />

Demo portrait by Christina @ wocintechchat.com M on Unsplash.

Sizes and presence

Four sizes cover dense rows through prominent profile surfaces. Presence becomes part of the avatar's accessible name.

tsx

<Avatar name="Ada Lovelace" size="xs" status="online" />
<Avatar name="Grace Hopper" size="sm" status="away" />
<Avatar name="Lin Chen" size="md" status="busy" />
<Avatar name="Sam Rivera" size="lg" status="offline" />