daisyUI Kit 🌼

AvatarGroup

AvatarGroup wraps any number of Avatar components to create a stack of round Avatars. It does not support Avatars with masks, but there is a workaround.

Code Example 
<AvatarGroup class="-space-x-2">
  <Avatar v-for="index in 4" :key="index" class="w-16">
    <img src="http://daisyui.com/[email protected]">
  </Avatar>
</AvatarGroup>

Components

The AvatarGroup component wraps Avatar components.

AvatarGroup

The AvatarGroup component's styles and behavior can be customized with following prop:

PropTypeDescription
vertical
boolean
changes the group to stack vertically.

Vertical Groups

You can also use the vertical prop to make the avatars stack vertically. Make sure to use negative vertical margins (instead of horizontal) to keep them aligned.

Code Example 
<AvatarGroup vertical class="-space-y-4">
  <Avatar v-for="index in 5" :key="index" class="w-16">
    <img src="http://daisyui.com/[email protected]">
  </Avatar>
</AvatarGroup>

With Masks

The AvatarGroup is not intended for use with Masked Avatars, because it adds a border around each Avatar, and forces the Avatar to be round. With masked Avatars, it's best to manually apply flexbox styles.

Code Example 
<div class="flex flex-col -space-y-6">
  <Mask v-for="index in 3" :key="index" heart class="flex p-2 place-content-center bg-neutral">
    <Avatar heart class="w-32">
      <img src="http://daisyui.com/[email protected]">
    </Avatar>
  </Mask>
</div>