AvenUI.Components.Avatar (AvenUI v1.0.0)

Copy Markdown View Source

Avatar component — initials or image, with size, color, and stack variants.

Examples

<.avatar initials="KN" />
<.avatar initials="KN" size="lg" color="green" />
<.avatar src="https://..." alt="Khemmanat" />

<%# Stacked group %>
<.avatar_group>
  <.avatar initials="KN" />
  <.avatar initials="AB" color="amber" />
  <.avatar initials="+3" color="gray" />
</.avatar_group>

Summary

Functions

avatar(assigns)

Renders an avatar with initials or image.

avatar_group(assigns)

Stack multiple avatars with overlap.

Functions

avatar(assigns)

Renders an avatar with initials or image.

Attributes

  • initials (:string) - Defaults to nil.
  • src (:string) - Defaults to nil.
  • alt (:string) - Defaults to "".
  • size (:string) - Defaults to "md". Must be one of "xs", "sm", "md", "lg", or "xl".
  • color (:string) - Defaults to "purple". Must be one of "purple", "blue", "green", "amber", "red", or "gray".
  • class (:string) - Defaults to nil.

avatar_group(assigns)

Stack multiple avatars with overlap.

Attributes

  • class (:string) - Defaults to nil.

Slots

  • inner_block (required)