Avatar
An image element or initials representing the user.
<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>