Renders an avatar: an image when src is given, otherwise initials derived from name, otherwise a generic person icon.

<.avatar src={@user.avatar_url} name={@user.name} />
<.avatar name="Ada Lovelace" size="lg" status="online" />
<.avatar name="Ada Lovelace" shape="square" />

Behaviour worth knowing:

• If the image fails to load it is removed and the initials show instead (a single delegated listener in the SlopUI JS handles this; no hook).
• Initials get a stable background hue derived from name, so the same person always gets the same color. Set color to override.
• status renders a dot with an accessible label; the avatar's own aria-label becomes "Name, online".

Attributes

• src (:string) - Defaults to nil.
• name (:string) - used for the accessible name and initials. Defaults to nil.
• size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
• shape (:string) - Defaults to "circle". Must be one of "circle", or "square".
• status (:string) - Defaults to nil.Must be one of nil, "online", "offline", "busy", or "away".

• color (:string) - accent | neutral | success | warning | danger | info; default hashes the name. Defaults to nil.

• class (:any) - Defaults to nil.
• Global attributes are accepted.

Overlapping group of avatars. Pass overflow to append a "+N" marker.

<.avatar_group overflow={4}>
  <.avatar name="Ada" /><.avatar name="Grace" /><.avatar name="Linus" />
</.avatar_group>

Attributes

• size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
• overflow (:integer) - number of avatars not shown. Defaults to nil.
• class (:any) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)