View Source Lume.Components.Avatar (lume v0.3.0)

A simple avatar component that displays either an image or fallback initials.

Features

  • Supports image avatars with fallback to initials
  • Multiple sizes (small, medium, large)
  • Shape variants (circle or rounded square)
  • Optional status indicator dot
  • Dark mode support
  • Automatic error handling for failed image loads
  • Customizable fallback colors

Examples 

<.avatar
  alt="John Doe"
  fallback="JD"
  size={:md}
  image_url="path/to/image.jpg"
/>

# With status indicator
<.avatar
  alt="Alan B"
  fallback="AB"
  show_dot
  dot_variant={:success}
/>

# Custom fallback colors
<.avatar
  alt="User"
  fallback="U"
  fallback_class="bg-indigo-100 text-indigo-600"
/>

# Square variant with custom size
<.avatar
  alt="User"
  fallback="U"
  shape={:square}
  class="h-16 w-16"
/>

Summary

Functions

avatar(assigns)

Renders an avatar component.

Functions

avatar(assigns)

Renders an avatar component.

Attributes

  • image_url - Optional URL to the avatar image
  • alt - Required alt text for the avatar
  • fallback - Required text to display when image is missing or loading fails
  • fallback_class - Custom classes for fallback background and text colors
  • size - Size variant (:sm, :md, :lg), defaults to :md
  • shape - Shape variant (:circle, :square), defaults to :circle
  • show_dot - Whether to show a status dot indicator
  • dot_variant - Status dot color variant, defaults to :success
  • class - Additional CSS classes to apply to the avatar

Attributes

  • image_url (:string) - Defaults to nil.
  • alt (:string) (required)
  • fallback (:string) (required)
  • fallback_class (:string) - Defaults to "bg-gray-200 text-gray-900".
  • size (:atom) - Defaults to :md.
  • shape (:atom) - Defaults to :circle.
  • show_dot (:boolean) - Defaults to false.
  • dot_variant (:atom) - Defaults to :success.
  • class (:string) - Defaults to nil.