Avatar Group
daisyUI 5 の avatar-group クラスで avatar を重ねた列 (facepile)。プロジェクトメンバー / 参加者 / 担当者リスト等に使う。slot に <x-avatar> を複数並べるだけ。spacing で重なり量を 3 段切替 (tight / normal / loose)。
default spacing=normal — 4 avatars (initials)
AT
MN
KK
SS
spacing variants — tight / normal / loose
tight
AT
MN
KK
SS
RY
-space-x-6 (more overlap)
normal
AT
MN
KK
SS
RY
-space-x-4 (default)
loose
AT
MN
KK
SS
RY
-space-x-2 (less overlap)
real-world example — Project members + overflow badge
Project members:
AT
MN
KK
SS
+12
Reviewers (icons):
Online now:
AT
MN
KK
SS
with sizes — sm / md (default) / lg
sm
AT
MN
KK
SS
md
AT
MN
KK
SS
lg
AT
MN
KK
SS
使い方
{{-- 最小 (spacing=normal default) --}}
<x-avatar-group>
<x-avatar initials="AT" color="primary" appearance="solid" />
<x-avatar initials="MN" color="secondary" appearance="solid" />
<x-avatar initials="KK" color="accent" appearance="solid" />
<x-avatar initials="SS" color="info" appearance="solid" />
</x-avatar-group>
{{-- spacing: tight (-space-x-6) / normal (-space-x-4) / loose (-space-x-2) --}}
<x-avatar-group spacing="tight">
<x-avatar initials="AT" color="primary" appearance="solid" />
<x-avatar initials="MN" color="secondary" appearance="solid" />
</x-avatar-group>
{{-- with overflow badge (extra members count) --}}
<x-avatar-group>
<x-avatar initials="AT" color="primary" appearance="solid" />
<x-avatar initials="MN" color="secondary" appearance="solid" />
<x-avatar initials="KK" color="accent" appearance="solid" />
<x-avatar initials="SS" color="info" appearance="solid" />
<x-avatar initials="+12" color="neutral" appearance="soft" />
</x-avatar-group>
{{-- with status indicators --}}
<x-avatar-group>
<x-avatar initials="AT" color="primary" appearance="solid" status="online" />
<x-avatar initials="MN" color="secondary" appearance="solid" status="busy" />
</x-avatar-group>