Composition
This component is a composition of 2 key components:
- LumexAvatar: A component that represents an avatar.
- LumexAvatarGroup: A component that represents a group of avatars.
Usage
The avatar component represents a user or entity with an image, initials, or a fallback icon.
<div class="flex gap-4 items-center">
<LumexAvatar Src="https://i.pravatar.cc/150?img=2" />
<LumexAvatar Name="Daniel" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=6" />
<LumexAvatar Name="John Doe" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=9" />
<LumexAvatar Name="Jane" />
</div>
Bordered
Add a border around the avatar.
<div class="flex gap-4 items-center">
<LumexAvatar Bordered="@true" Src="https://i.pravatar.cc/150?img=2" />
<LumexAvatar Bordered="@true" Name="Daniel" />
<LumexAvatar Bordered="@true" Src="https://i.pravatar.cc/150?img=6" />
<LumexAvatar Bordered="@true" Name="John Doe" />
<LumexAvatar Bordered="@true" Src="https://i.pravatar.cc/150?img=9" />
<LumexAvatar Bordered="@true" Name="Jane" />
</div>
Sizes
Customize the size of the avatar.
<div class="flex gap-4 items-center">
<LumexAvatar Class="w-6 h-6"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=2" />
<LumexAvatar Size="@Size.Small"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=6" />
<LumexAvatar Size="@Size.Medium"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=9" />
<LumexAvatar Size="@Size.Large"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=11" />
<LumexAvatar Class="w-18 h-18"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=12" />
</div>
Radius
Adjust the border radius to create circular or squared avatars.
<div class="flex gap-4 items-center">
<LumexAvatar Radius="@Radius.Small"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=2" />
<LumexAvatar Radius="@Radius.Medium"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=6" />
<LumexAvatar Radius="@Radius.Large"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=9" />
<LumexAvatar Radius="@Radius.Full"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=11" />
</div>
Colors
Set a background and border color for avatar.
<div class="flex gap-4 items-center">
<LumexAvatar Color="@ThemeColor.Default"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=2" />
<LumexAvatar Color="@ThemeColor.Primary"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=6" />
<LumexAvatar Color="@ThemeColor.Secondary"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=9" />
<LumexAvatar Color="@ThemeColor.Success"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=11" />
<LumexAvatar Color="@ThemeColor.Warning"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=12" />
<LumexAvatar Color="@ThemeColor.Danger"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=24" />
<LumexAvatar Color="@ThemeColor.Info"
Bordered="@true"
Src="https://i.pravatar.cc/150?img=43" />
</div>
Fallbacks
When an image fails to load, a default fallback is displayed. There are 2 types of fallbacks:
- If a
Nameis provided, it is used to generate initials. - If no
Nameis provided, a default avatar icon is displayed.
If ShowFallback is set to false, fallbacks will not be displayed.
<div class="flex gap-4 items-center">
<LumexAvatar Src="https://images.unsplash.com/broken" />
<LumexAvatar Name="John Doe" Src="https://images.unsplash.com/broken" />
<LumexAvatar ShowFallback="@false" Name="Jane" Src="https://images.unsplash.com/broken" />
</div>
Custom Fallback
Use a custom content as a fallback when an image is unavailable.
<div class="flex gap-4 items-center">
<LumexAvatar Src="https://images.unsplash.com/broken">
<FallbackContent>
<LumexIcon Icon="@Icons.Rounded.PhotoCamera"
Class="animate-pulse text-default-500" />
</FallbackContent>
</LumexAvatar>
<LumexAvatar Name="John Doe" Src="https://images.unsplash.com/broken" />
<LumexAvatar ShowFallback="@false" Name="Jane" Src="https://images.unsplash.com/broken" />
</div>
Custom Initials
You can customize the logic for generating initials by passing a function to the Initials parameter.
By default, the initials are created by combining the first characters of each word in the Name parameter.
Avatar Group
The avatar group component displays multiple avatars together.
<LumexAvatarGroup Bordered="@true">
<LumexAvatar Src="https://i.pravatar.cc/150?img=2" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=6" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=9" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=11" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=12" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=24" />
</LumexAvatarGroup>
Max Count
Limit the number of avatars displayed, grouping the rest into a counter.
<LumexAvatarGroup Max="3" Bordered="@true">
<LumexAvatar Src="https://i.pravatar.cc/150?img=2" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=6" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=9" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=11" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=12" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=24" />
</LumexAvatarGroup>
Custom Count
Customize how the remaining avatars count is represented.
+3 others
<LumexAvatarGroup Max="3" Bordered="@true">
<CountContent Context="count">
<p class="text-small text-foreground font-medium ms-2">+@count others</p>
</CountContent>
<ChildContent>
<LumexAvatar Src="https://i.pravatar.cc/150?img=2" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=6" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=9" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=11" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=12" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=24" />
</ChildContent>
</LumexAvatarGroup>
Grid
Display avatars in a structured grid layout.
<LumexAvatarGroup Max="7" Grid="@true" Bordered="@true">
<LumexAvatar Src="https://i.pravatar.cc/150?img=2" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=6" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=9" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=11" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=12" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=24" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=47" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=58" />
<LumexAvatar Src="https://i.pravatar.cc/150?img=68" />
</LumexAvatarGroup>
Custom Styles
This component suppots named slots (represented as data-* attributes) that
allow you to apply custom CSS to specific parts of the component.
LumexAvatar
- Base: The main container for the avatar component.
- Img: The slot that holds the avatar image.
- Fallback: Displays when the image is unavailable, showing initials or an icon.
- Name: Represents the text or initials displayed inside the avatar.
- Icon: The slot for a custom fallback icon when no image is provided.
LumexAvatarGroup
- Base: The main container for the avatar group.
- Count: Displays the number of hidden avatars when the max limit is reached.
You can customize the component(s) by passing any Tailwind CSS classes to the following component parameters:
Avatar
Class: The CSS class names to style the avatar wrapper.Classes: The CSS class names to style the avatar slots.
Avatar Group
Class: The CSS class names to style the avatar group wrapper.Classes: The CSS class names to style the avatar group slots.AvatarClasses: The CSS class names to style the avatars slots.
<LumexAvatar Icon="@Icons.Rounded.SupportAgent" Classes="@_classes" />
@code {
private AvatarSlots _classes = new()
{
Base = "bg-gradient-to-br from-warning-200 to-warning-500",
Icon = "text-black/80"
};
}
API
See the API references below for a complete guide to all the parameters available for the components mentioned here.