Avatar

User or entity image with graceful fallback to initials, plus an overlapping AvatarGroup with a +N overflow indicator.

Installation

npx dafink-ui add avatar

Demo

Composition

</AvatarGroup>

Props

Name	Type	Default	Description
src	string	-	Image URL. When set, alt is required (enforced by the prop types).
alt	string	-	Accessible description of the person; required with src, optional otherwise.
name	string	-	Full name used to derive fallback initials ("Ada Lovelace" → "AL") and the fallback accessible label.
fallback	string	-	Explicit fallback text; overrides initials derived from name.
size	"sm" \| "md" \| "lg"	"md"	Avatar dimensions: 28px / 36px / 48px.
shape	"circle" \| "square"	"circle"	circle is rounded-full; square is rounded-md.
max (AvatarGroup)	number	-	Maximum avatars shown before collapsing the rest into a "+N" indicator.
className	string	""	Additional Tailwind classes merged onto the root element.

Accessibility

Avatar renders a plain <span> with nothing focusable. An image avatar puts the required alt directly on the <img>; a fallback with a name or alt gets role="img" plus aria-label on the root (initials stay aria-hidden="true"), and a fallback with neither is fully aria-hidden="true". AvatarGroup's "+N" overflow indicator follows the same role="img" pattern. Avatar adds no keyboard behavior; wrap it in a button or link if it needs to be interactive.