View Source Lume.Components.Avatar (lume v0.2.2)
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
Renders an avatar component.
Functions
Renders an avatar component.
Attributes
image_url
- Optional URL to the avatar imagealt
- Required alt text for the avatarfallback
- Required text to display when image is missing or loading failsfallback_class
- Custom classes for fallback background and text colorssize
- Size variant (:sm
,:md
,:lg
), defaults to:md
shape
- Shape variant (:circle
,:square
), defaults to:circle
show_dot
- Whether to show a status dot indicatordot_variant
- Status dot color variant, defaults to:success
class
- Additional CSS classes to apply to the avatar
Attributes
image_url
(:string
) - Defaults tonil
.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 tofalse
.dot_variant
(:atom
) - Defaults to:success
.class
(:string
) - Defaults tonil
.