Skip to main content

AvatarGroup

Show a compact stack of avatars with an overflow count.

View as MarkdownSource Code

Use AvatarGroup to show a small set of people in a bounded space. It truncates the visible stack at max; keep the full membership available elsewhere when users need it.

Basic usage#

import { AvatarGroup } from 'moraine'

export function Example() {
  return <AvatarGroup items={[{ src: '/alex.png', alt: 'Alex', fallback: 'A' }]} />
}

Playground#

SCJD+2
Props
Slots

Anatomy#

AvatarGroup [component; slot=root]
├── item [slot]
│   ├── image [slot]
│   ├── fallback [slot]
│   │   └── fallbackContent [slot]
│   └── badge [slot]
└── count [slot]

Usage#

Grouping avatars#

AvatarGroup renders no root for an empty items array. Avatar items retain input order in the DOM. max is a number: omit it to show every avatar, set it to 0 to show only +N, or use a positive number to show its floored count. The overflow count follows the visible items.

import { AvatarGroup } from 'moraine'

export function GroupingUsage() {
  return (
    <AvatarGroup
      items={[
        {
          src: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=128&fit=crop&q=80',
          alt: 'Sarah Connor',
          text: 'SC',
        },
        {
          src: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=128&fit=crop&q=80',
          alt: 'Marcus Vance',
          text: 'MV',
        },
        {
          src: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=128&fit=crop&q=80',
          alt: 'Elena Rostova',
          text: 'ER',
        },
      ]}
    />
  )
}

Attributes#

Attributes
data-statusSlot: avatar-group-item, avatar-image, avatar-fallbackDescription: Stores async loading, loaded, or error status.

Props#

Props for the AvatarGroup component. Renders a <div> element by default.

Prop