DuneUI

<dui-avatar src="/avatars/avatar-1.jpg"/>
<dui-avatar-group>
    <dui-avatar src="/avatars/avatar-1.jpg"/>
    <dui-avatar src="/avatars/avatar-2.jpg"/>
    <dui-avatar src="/avatars/avatar-3.jpg"/>
</dui-avatar-group>

Usage

Use dui-avatar to display a single avatar. Display a group of avatars using dui-avatar-group.

<!-- Display a single avatar -->
<dui-avatar src="..." />

<!-- Display a group of avatars -->
<dui-avatar-group>
    <dui-avatar src="..." />
    <dui-avatar src="..." />
</dui-avatar-group>

Examples

Sizes

<div class="flex flex-wrap items-center gap-2">
    <dui-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Small"/>
    <dui-avatar src="/avatars/avatar-1.jpg"/>
    <dui-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Large"/>
</div>
<div class="flex flex-wrap items-center gap-2">
    <dui-avatar initials="DU" size="AvatarSize.Small"/>
    <dui-avatar initials="DU"/>
    <dui-avatar initials="DU" size="AvatarSize.Large"/>
</div>

Name or Initials

Display the initials of a user using the initials attribute. You can specify the name attribute instead, and the initials will be automatically determined.

<!-- specify initials explicitly --> 
<dui-avatar initials="IB" />
<!-- or specify name -->
<dui-avatar name="Ibn Battutta" />

Badge

<div class="flex flex-wrap items-center gap-2">
    <dui-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Small">
        <dui-avatar-badge/>
    </dui-avatar>
    <dui-avatar src="/avatars/avatar-2.jpg">
        <dui-avatar-badge/>
    </dui-avatar>
    <dui-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Large">
        <dui-avatar-badge/>
    </dui-avatar>
</div>
<div class="flex flex-wrap items-center gap-2">
    <dui-avatar initials="DU" size="AvatarSize.Small">
        <dui-avatar-badge/>
    </dui-avatar>
    <dui-avatar initials="DU">
        <dui-avatar-badge/>
    </dui-avatar>
    <dui-avatar initials="DU" size="AvatarSize.Large">
        <dui-avatar-badge/>
    </dui-avatar>
</div>

Badge with Icon

<div class="flex flex-wrap items-center gap-2">
    <dui-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Small">
        <dui-avatar-badge>
            <dui-icon name="plus"/>
        </dui-avatar-badge>
    </dui-avatar>
    <dui-avatar src="/avatars/avatar-3.jpg">
        <dui-avatar-badge>
            <dui-icon name="plus"/>
        </dui-avatar-badge>
    </dui-avatar>
    <dui-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Large">
        <dui-avatar-badge>
            <dui-icon name="plus"/>
        </dui-avatar-badge>
    </dui-avatar>
</div>
<div class="flex flex-wrap items-center gap-2">
    <dui-avatar initials="DU" size="AvatarSize.Small">
        <dui-avatar-badge>
            <dui-icon name="plus"/>
        </dui-avatar-badge>
    </dui-avatar>
    <dui-avatar initials="DU">
        <dui-avatar-badge>
            <dui-icon name="plus"/>
        </dui-avatar-badge>
    </dui-avatar>
    <dui-avatar initials="DU" size="AvatarSize.Large">
        <dui-avatar-badge>
            <dui-icon name="plus"/>
        </dui-avatar-badge>
    </dui-avatar>
</div>

Group

Add a group of avatars using dui-avatar-group.

<dui-avatar-group>
    <dui-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Small"/>
    <dui-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Small"/>
    <dui-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Small"/>
</dui-avatar-group>
<dui-avatar-group>
    <dui-avatar src="/avatars/avatar-1.jpg"/>
    <dui-avatar src="/avatars/avatar-2.jpg"/>
    <dui-avatar src="/avatars/avatar-3.jpg"/>
</dui-avatar-group>
<dui-avatar-group>
    <dui-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Large"/>
    <dui-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Large"/>
    <dui-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Large"/>
</dui-avatar-group>

Group with count

<dui-avatar-group>
    <dui-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Small"/>
    <dui-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Small"/>
    <dui-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Small"/>
    <dui-avatar-group-count>+3</dui-avatar-group-count>
</dui-avatar-group>
<dui-avatar-group>
    <dui-avatar src="/avatars/avatar-1.jpg"/>
    <dui-avatar src="/avatars/avatar-2.jpg"/>
    <dui-avatar src="/avatars/avatar-3.jpg"/>
    <dui-avatar-group-count>+3</dui-avatar-group-count>
</dui-avatar-group>
<dui-avatar-group>
    <dui-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Large"/>
    <dui-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Large"/>
    <dui-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Large"/>
    <dui-avatar-group-count>+3</dui-avatar-group-count>
</dui-avatar-group>

Group with Icon count

<dui-avatar-group>
    <dui-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Small"/>
    <dui-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Small"/>
    <dui-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Small"/>
    <dui-avatar-group-count>
        <dui-icon name="plus"/>
    </dui-avatar-group-count>
</dui-avatar-group>
<dui-avatar-group>
    <dui-avatar src="/avatars/avatar-1.jpg"/>
    <dui-avatar src="/avatars/avatar-2.jpg"/>
    <dui-avatar src="/avatars/avatar-3.jpg"/>
    <dui-avatar-group-count>
        <dui-icon name="plus"/>
    </dui-avatar-group-count>
</dui-avatar-group>
<dui-avatar-group>
    <dui-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Large"/>
    <dui-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Large"/>
    <dui-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Large"/>
    <dui-avatar-group-count>
        <dui-icon name="plus"/>
    </dui-avatar-group-count>
</dui-avatar-group>

In Empty

<dui-empty class="w-full flex-none border">
    <dui-empty-header>
        <dui-empty-media>
            <dui-avatar-group>
                <dui-avatar src="/avatars/avatar-1.jpg" size="AvatarSize.Large"/>
                <dui-avatar src="/avatars/avatar-2.jpg" size="AvatarSize.Large"/>
                <dui-avatar src="/avatars/avatar-3.jpg" size="AvatarSize.Large"/>
                <dui-avatar-group-count>
                    <dui-icon name="plus"/>
                </dui-avatar-group-count>
            </dui-avatar-group>
        </dui-empty-media>
        <dui-empty-title>No Team Members</dui-empty-title>
        <dui-empty-description>
            Invite your team to collaborate on this project.
        </dui-empty-description>
    </dui-empty-header>
    <dui-empty-content>
        <dui-button>
            <dui-icon name="plus"/>
            Invite Members
        </dui-button>
    </dui-empty-content>
</dui-empty>

The <dui-avatar> tag helper renders a <span> element containing either an <img> (when src is set) or a fallback <span> with the initials. In addition to the attributes below, it forwards any standard global HTML attributes (such as id or title) to the rendered element.

Prop

Type

`<dui-avatar-badge>`

The <dui-avatar-badge> tag helper renders a <span> element positioned in the bottom-right corner of the parent avatar, sized to match the avatar's size. It has no attributes of its own, but forwards any standard global HTML attributes to the rendered element.

`<dui-avatar-group>`

The <dui-avatar-group> tag helper renders a <div> element that overlaps its child avatars. It has no attributes of its own, but forwards any standard global HTML attributes to the rendered element.

`<dui-avatar-group-count>`

The <dui-avatar-group-count> tag helper renders a <div> element displaying its child content (such as +3) at the end of an avatar group. It has no attributes of its own, but forwards any standard global HTML attributes to the rendered element.

Avatar