Avatar

Atomshadcn/ui, restyled with tokens

A Member's photo, with their initials or an icon until it loads — or if it never does.

components/atoms/avatar.tsx — Avatar, AvatarImage, AvatarFallback

Use it for: Showing who someone is next to their name.
Not for: Logos or decorative images. Use next/image.

States

TSTSTS

Initials, by size

OPOPOP

Shapes

Icon fallback

GTS

PhotoFalls back to initials if it fails

Usage

import { Avatar, AvatarFallback, AvatarImage } from '@/components/atoms/avatar';

<Avatar size="md">
  <AvatarImage src={member.photoUrl} alt={member.displayName} />
  <AvatarFallback>{initials(member.displayName)}</AvatarFallback>
</Avatar>

Props

Avatar props
Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'lg'	24, 32 or 40 px.
shape	'circle' \| 'rounded' \| 'square'	'circle'	Circle for people; rounded or square for Workspaces.
AvatarImage src / alt	string	—	The photo, and the person’s name as its alternative.
AvatarFallback delayMs	number	—	Wait before showing the fallback, so a fast photo does not flash initials.

Accessibility

The photo’s alt is the person’s name.
When the name is already written beside it, the fallback initials are repeated text: consider aria-hidden on the Avatar.