Avatar
User or entity image with graceful fallback to initials, plus an overlapping AvatarGroup with a +N overflow indicator.
Installation
npx dafink-ui add avatarDemo
Composition
<AvatarGroup>
</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. |