AvatarGroup — Design System

Default group

Avatars stack with a negative margin overlap. Pass max to cap the visible count.

import { AvatarGroup } from '@mihcm/ui/AvatarGroup';
import { Avatar, AvatarFallback, AvatarImage } from '@mihcm/ui/Avatar';
 
<AvatarGroup max={4}>
  <Avatar>
    <AvatarImage src="/people/photos/jane-doe.jpg" alt="Jane Doe" />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/people/photos/alex-kim.jpg" alt="Alex Kim" />
    <AvatarFallback>AK</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/people/photos/maya-chen.jpg" alt="Maya Chen" />
    <AvatarFallback>MC</AvatarFallback>
  </Avatar>
</AvatarGroup>;

With overflow

When children exceed max, a "+N" badge appears. Screen readers announce the overflow count.

import { AvatarGroup } from '@mihcm/ui/AvatarGroup';
import { Avatar, AvatarFallback, AvatarImage } from '@mihcm/ui/Avatar';
 
<AvatarGroup max={3}>
  <Avatar>
    <AvatarImage src="/people/photos/jane-doe.jpg" alt="Jane Doe" />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/people/photos/alex-kim.jpg" alt="Alex Kim" />
    <AvatarFallback>AK</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/people/photos/maya-chen.jpg" alt="Maya Chen" />
    <AvatarFallback>MC</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/people/photos/sofia-lee.jpg" alt="Sofia Lee" />
    <AvatarFallback>SL</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/people/photos/omar-hassan.jpg" alt="Omar Hassan" />
    <AvatarFallback>OH</AvatarFallback>
  </Avatar>
</AvatarGroup>;

Small size

Use size="sm" for dense layouts like table rows or comment threads.

import { AvatarGroup } from '@mihcm/ui/AvatarGroup';
import { Avatar, AvatarFallback, AvatarImage } from '@mihcm/ui/Avatar';
 
<AvatarGroup max={4} size="sm">
  <Avatar>
    <AvatarImage src="/people/photos/alex-kim.jpg" alt="Alex Kim" />
    <AvatarFallback>AK</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/people/photos/jane-doe.jpg" alt="Jane Doe" />
    <AvatarFallback>JD</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/people/photos/maya-chen.jpg" alt="Maya Chen" />
    <AvatarFallback>MC</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/people/photos/sofia-lee.jpg" alt="Sofia Lee" />
    <AvatarFallback>SL</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarImage src="/people/photos/omar-hassan.jpg" alt="Omar Hassan" />
    <AvatarFallback>OH</AvatarFallback>
  </Avatar>
</AvatarGroup>;