Avatar Group

Avatar Group displays a collection of avatars with optional max limit and overflow count indicator.

Basic Usage

AJ BS +3

import { AvatarGrp } from "@paramanu/data-display-react"
import { Avatar } from "@paramanu/data-display-react"

export default function App() {
return (
  <AvatarGrp max={2}>
    <Avatar name="Alice Johnson" />
    <Avatar name="Bob Smith" />
    <Avatar name="Carol White" />
    <Avatar name="David Brown" />
    <Avatar name="Eve Davis" />
  </AvatarGrp>
)
}

<div class="pm-avatar-grp pm-avatar-grp--md pm-avatar-grp--normal" role="group" aria-label="Avatars">
<span class="pm-avatar pm-avatar--circle pm-avatar--md pm-avatar--primary" role="img"><span class="pm-avatar__fallback">AJ</span></span>
<span class="pm-avatar pm-avatar--circle pm-avatar--md pm-avatar--primary" role="img"><span class="pm-avatar__fallback">BS</span></span>
<span class="pm-avatar-grp__overflow">+3</span>
</div>

Accessibility

Uses role="group" with aria-label="Avatars".
Overflow count is visible to screen readers.

Best Practices

Set max to limit visible avatars in tight spaces.
Use consistent sizes within a group.

Props

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"md"`	Size of child avatars
`spacing`	`"tight" \| "normal"`	`"normal"`	Overlap spacing
`max`	`number`	-	Maximum visible avatars before overflow

CSS Classes

Class	Description
`pm-avatar-grp`	Base group class
`pm-avatar-grp__overflow`	Overflow count indicator