Primitives

Avatar

Circular image of a user or entity with automatic fallback. Plus AvatarGroup for stacked rows.

Sizes

xs · sm · md · lg · xl

XSSMMDLGXL

With image

AvatarImage + AvatarFallback

AVML

<Avatar>
  <AvatarImage src='/priya.jpg' alt='Priya' />
  <AvatarFallback>PP</AvatarFallback>
</Avatar>

Avatar props

Prop	Type	Default	Description
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Diameter.

AvatarGroup

Auto-overflow with +N

ACMLPPDR+2

<AvatarGroup size='md' max={4}>
  <Avatar><AvatarFallback>AC</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>ML</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>PP</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>DR</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>KY</AvatarFallback></Avatar>
</AvatarGroup>

AvatarGroup props

Prop	Type	Default	Description
max	number	4	How many avatars before the "+N" overflow badge.
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'sm'	Applied to every child avatar.