elementsavatar-group

AvatarGroup

Group of overlapping avatars with an optional overflow count.

Import#

import { AvatarGroup } from 'moraine'

Usage#

AvatarGroup renders multiple Avatar items as an overlapping group with an optional overflow count. Use Avatar for a standalone avatar.

Slot Structure#

root
├── count (optional, overflow count)
└── item (×n)
    ├── image
    ├── fallback
    │   └── fallbackIcon (Icon, optional)
    └── badge (optional)

Examples#

Basic#

Overflow Count#

1
function Overflow() {
2
  return (
3
    <AvatarGroup
4
      max={3}
5
      items={[
6
        { text: 'AL' },
7
        { text: 'BM' },
8
        { text: 'CN', badge: 'i-lucide-check', badgePosition: 'top-right' },
9
        { text: 'DO' },
10
        { text: 'EP' },
11
      ]}
12
    />
13
  )
14
}

Sizes#

1
function Sizes() {
2
  const SIZES: AvatarGroupSize[] = ['xs', 'sm', 'md', 'lg', 'xl']
3

4
  return (
5
    <div class="flex flex-wrap gap-4 items-end">
6
      <For each={SIZES}>
7
        {(size) => (
8
          <div class="flex flex-col gap-2 items-center">
9
            <AvatarGroup
10
              size={size}
11
              max={2}
12
              items={[{ text: 'A' }, { text: 'B' }, { text: 'C' }]}
13
            />
14
            <span class="text-xs text-muted-foreground font-mono">{size}</span>
15
          </div>
16
        )}
17
      </For>
18
    </div>
19
  )
20
}

API Reference#

Attributes#

Slotroot0 attributes

Container of grouped avatars.

No attribute metadata for this slot.

Props#

Prop	Type	Default	Description
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`AvatarGroupT.Classes \| undefined`	—	—
items	`AvatarGroupT.Item[] \| undefined`	`[]`	Array of avatars to render in the group.
max	`string \| number \| undefined`	—	Maximum number of avatars to show.
ref	`JSX.HTMLElementTags["div"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined`	—	—
style	`JSX.CSSProperties \| undefined`	—	—
styles	`AvatarGroupT.Styles \| undefined`	—	—
transition	`"none" \| "fast" \| "normal" \| "slow" \| undefined`	—	—

Items#

Prop	Type	Default	Description
alt	`string \| undefined`	—	Accessible alt text for the avatar.
badge	`IconT.Name`	—	Icon name for the badge.
badgePosition	`NonNullable<"top-left" \| "top-right" \| "bottom-left" \| "bottom-right" \| undefined> \| undefined`	`bottom-right`	Position of the badge.
fallback	`IconT.Name`	—	Icon name to show as fallback.
onStatusChange	`((status: AvatarStatus) => void) \| undefined`	—	Callback when the loading status of the avatar changes.
src	`string \| undefined`	—	Source URL for the avatar image.
text	`string \| undefined`	—	Initial text to show if image fails or is missing.