Data Display

AvatarGroup

Display a collection of avatars in a stacked layout. Supports overflow truncation with a "+N" indicator, uniform sizing, border radius, and can be composed with children or an avatars prop.

Playground

Experiment with different props in real-time.

Size

Rounded

Max

Basic Usage

Wrap Avatar components inside AvatarGroup.

<script lang="ts">
  import { Avatar, AvatarGroup } from 'sv5ui';
</script>

<AvatarGroup>
  <Avatar src="https://i.pravatar.cc/300?u=1" alt="User 1" />
  <Avatar src="https://i.pravatar.cc/300?u=2" alt="User 2" />
  <Avatar src="https://i.pravatar.cc/300?u=3" alt="User 3" />
</AvatarGroup>

With Max

Limit visible avatars with max. Requires the avatars prop.

<AvatarGroup
  max={3}
  avatars={[
    { src: 'https://i.pravatar.cc/300?u=1', alt: 'User 1' },
    { src: 'https://i.pravatar.cc/300?u=2', alt: 'User 2' },
    { src: 'https://i.pravatar.cc/300?u=3', alt: 'User 3' },
    { src: 'https://i.pravatar.cc/300?u=4', alt: 'User 4' },
    { src: 'https://i.pravatar.cc/300?u=5', alt: 'User 5' },
    { src: 'https://i.pravatar.cc/300?u=6', alt: 'User 6' }
  ]}
/>

Sizes

The size prop controls all avatars in the group.

<AvatarGroup size="sm">
  <Avatar src="https://i.pravatar.cc/300?u=10" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=11" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=12" alt="User" />
</AvatarGroup>

<AvatarGroup size="md">
  <Avatar src="https://i.pravatar.cc/300?u=10" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=11" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=12" alt="User" />
</AvatarGroup>

<AvatarGroup size="lg">
  <Avatar src="https://i.pravatar.cc/300?u=10" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=11" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=12" alt="User" />
</AvatarGroup>

<AvatarGroup size="xl">
  <Avatar src="https://i.pravatar.cc/300?u=10" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=11" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=12" alt="User" />
</AvatarGroup>

Rounded

Control border radius with the rounded prop.

full

none

<AvatarGroup rounded="full">
  <Avatar src="https://i.pravatar.cc/300?u=1" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=2" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=3" alt="User" />
</AvatarGroup>

<AvatarGroup rounded="lg">
  <Avatar src="https://i.pravatar.cc/300?u=1" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=2" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=3" alt="User" />
</AvatarGroup>

<AvatarGroup rounded="none">
  <Avatar src="https://i.pravatar.cc/300?u=1" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=2" alt="User" />
  <Avatar src="https://i.pravatar.cc/300?u=3" alt="User" />
</AvatarGroup>

Using Avatars Prop

Pass an array of AvatarProps instead of children.

<script lang="ts">
  import { AvatarGroup } from 'sv5ui';

  const users = [
    { src: 'https://i.pravatar.cc/300?u=20', alt: 'Alice' },
    { src: 'https://i.pravatar.cc/300?u=21', alt: 'Bob' },
    { src: 'https://i.pravatar.cc/300?u=22', alt: 'Charlie' },
    { src: 'https://i.pravatar.cc/300?u=23', alt: 'Diana' }
  ];
</script>

<AvatarGroup avatars={users} max={3} />

With Initials Fallback

Avatars without images fall back to initials.

<AvatarGroup>
  <Avatar text="AB" alt="Alice Brown" />
  <Avatar text="CD" alt="Charlie Davis" />
  <Avatar src="https://i.pravatar.cc/300?u=30" alt="Eve" />
  <Avatar text="FG" alt="Frank Green" />
</AvatarGroup>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	`Outer container — controls layout, spacing, alignment of the avatar stack`
`base`	`Individual avatar wrapper — controls overlap, ring, z-index`

Snippets

Snippet	Description
`children`	`Custom children content — use when composing Avatar components manually instead of avatars prop`

Props

Prop	Type	Default	Description
`size`	`'3xs' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl'`	`'md'`	`Size applied to all avatars`
`rounded`	`'full' \| 'lg' \| 'md' \| 'sm' \| 'none'`	`'full'`	`Border radius applied to all avatars`
`avatars`	`AvatarProps[]`	`-`	`Array of avatar props (alternative to children)`
`max`	`number`	`-`	`Max visible avatars; overflow shows "+N"`
`as`	`keyof HTMLElementTagNameMap`	`'div'`	`HTML element to render as`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference to root element`
`class`	`string`	`-`	`Additional CSS classes on root element`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes (root, base)`

Avatar Badge