AvatarGroup
AvatarGroup component for building consistent, accessible interfaces.
Loading preview…
1
'use client';2
3
import { Avatar, CardFooter } from 'sdaia-ui';4
5
const MEMBERS = [Installation
npx sdaia-ui@latest add avatargroup
Usage
Use AvatarGroup consistently across your product following the usage guidelines and spacing rules defined in the design system.
Examples
Default
A stacked row of avatars representing multiple users.
Loading preview…
1
<CardFooter.AvatarGroup>2
<Avatar type="initials" initials="AK" size="md" />3
<Avatar type="initials" initials="SR" size="md" />4
<Avatar type="initials" initials="OH" size="md" />5
<Avatar type="initials" initials="MN" size="md" />Max Count
Limits visible avatars and shows a count bubble for the remaining users.
Loading preview…
1
<CardFooter.AvatarGroup>2
<Avatar type="initials" initials="AK" size="md" />3
<Avatar type="initials" initials="SR" size="md" />4
<Avatar type="initials" initials="OH" size="md" />5
<Avatar type="initials" initials="MN" size="md" />API Reference
Avatar Group Props
Props for the Avatar Group component.
Prop | Type | Default | Required |
|---|---|---|---|
items | AvatarGroupItem[] | — | required |
type | 'group' | 'individual' | 'group' | optional |
size | AvatarSize | 'md' | optional |
max | number | — | optional |
dir | 'ltr' | 'rtl' | — | optional |
rtl | boolean | — | optional |