Avatar

ContentCopy Anchor Link

The Avatar shows the photo once src loads. Until then, or if it fails, it shows the fallback text. Without fallback it draws a person glyph.

fallback renders verbatim, so pass the initials you want to show. children replace the photo and the fallback.

<Avatar size="medium" src={photo} alt="Somchai Prasert" fallback="SP" />
<Avatar size="medium" fallback="NK" />
<Avatar size="medium" />

SizesCopy Anchor Link

Five sizes, from tiny (20px) to large (128px). xsmall (24px) is the default. The initials keep the 16px font-size mode, so they never outgrow the circle when an app scales its base font size.

<Avatar size="tiny" fallback="SP" />
<Avatar size="xsmall" fallback="SP" />
<Avatar size="small" fallback="SP" />
<Avatar size="medium" fallback="SP" />
<Avatar size="large" fallback="SP" />

VariantsCopy Anchor Link

variant sets the border. default has none, border draws a 2px subtle border and dashed a 2px dashed one.

<Avatar size="medium" fallback="NK" />
<Avatar size="medium" variant="border" fallback="NK" />
<Avatar size="medium" variant="dashed" />

StatusCopy Anchor Link

status adds a success, neutral or error dot on the edge of the circle. The dot is hidden from assistive technology, so put the status in alt as well.

<Avatar
  size="medium"
  src={portrait('#9ec5e8', '#f1c27d', '#3d5a80')}
  alt="Somchai Prasert, online"
  status="success"
/>
<Avatar
  size="medium"
  src={portrait('#f4b6c2', '#c68642', '#6d597a')}
  alt="Nicha Kanchana, away"
  status="neutral"
/>
<Avatar
  size="medium"
  src={portrait('#b5e48c', '#8d5524', '#1d3557')}
  alt="Arthit Wong, sync failed"
  status="error"
/>

Disabled and loadingCopy Anchor Link

disabled dims the Avatar and sets aria-disabled. loading shows the skeleton fill, hides the content and sets aria-busy. The Avatar also shows the skeleton while its image loads.

<Avatar size="medium" fallback="SP" disabled />
<Avatar size="medium" fallback="SP" loading />

GroupCopy Anchor Link

AvatarGroup draws a white ring around each child and places the rings edge to edge. Its size reaches every child that does not set its own.

The group does not count or slice. Render the visible Avatars yourself and an AvatarGroupCount with the overflow.

<AvatarGroup size="small">
  {members.map((member) => (
    <Avatar key={member.id} src={member.photo} alt={member.name} />
  ))}
  <AvatarGroupCount>+4</AvatarGroupCount>
</AvatarGroup>

InteractiveCopy Anchor Link

render swaps the root element. Rendered as a button or a link, the Avatar shows a hover overlay and the focus ring. A plain Avatar shows neither.

<Avatar
  size="medium"
  fallback="SP"
  aria-label="Open Somchai Prasert's profile"
  render={<button type="button" />}
/>

AccessibilityCopy Anchor Link

• alt names the photo. It falls back to fallback, then to an empty string.
• The status dot is aria-hidden. Put the status in alt or in nearby text.
• An interactive Avatar needs an accessible name. With a photo, alt gives it one. With initials, pass aria-label.
• disabled sets aria-disabled. loading and a loading image set aria-busy.

APICopy Anchor Link

AvatarCopy Anchor Link

AvatarGroupCopy Anchor Link

AvatarGroupCountCopy Anchor Link