Avatar

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

<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

Use the Bordered parameter to add the 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

Use the Size parameter to set 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

Use the Radius parameter to set the border radius of the avatar.

<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

Use the Color parameter to set the color of the 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 Name is provided, it is used to generate initials.
If no Name is provided, a default avatar icon is displayed.

If the ShowFallback parameter 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 the FallbackContent parameter to set a custom fallback for the avatar.

@using LumexUI.Shared.Icons

<div class="flex gap-4 items-center">
    <LumexAvatar Src="https://images.unsplash.com/broken">
        <FallbackContent>
            <CameraIcon 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

By default, initials are created by combining the first characters of each word in the Name parameter. This logic can be customized by passing a function to the Initials parameter.

Avatar group

<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

Use the Max parameter to limit the number of avatars of the avatar group.

<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

Use the CountContent parameter to customize the counter of the avatar group.

+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

Use the Grid parameter to display the avatar group in a 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:

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 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.

LumexAvatar

LumexAvatarGroup

Avatar

Avatar Group

On this page