Avatar

Circular user image with a text fallback behind it.

BKAYMD

AB+3

Props

Prop	Values	Default	Description
`src`	string	—	Image URL. Omit it to show only the fallback.
`alt`	string	`""`	Alt text for the image.
`fallback`	node	—	Usually one or two initials.
`size`	`"sm"`, `"md"`, `"lg"`	`"md"`	Circle and text size.
`className`	string	`""`	Appended after the component's own classes.

Common patterns

<Avatar src={user.avatarUrl} alt={user.name} fallback={initials(user.name)} />

// Stacked group
<div className="flex -space-x-2">
  <Avatar fallback="A" className="ring-2 ring-surface" />
  <Avatar fallback="B" className="ring-2 ring-surface" />
</div>

Notes

The fallback sits underneath the image rather than swapping in when loading fails. If the image loads it covers the initials; if it doesn't, they are already there. No onError handler, no state, no flash of the wrong thing.

The trade-off is that a broken image shows the browser's own broken-image affordance on top of the initials in some browsers. If that bothers you, add onError={(e) => (e.currentTarget.style.display = "none")} in your copy.