Components/Data Display/AvatarGroup

AvatarGroup

Data Display

Stacked row of Avatar components with overflow count.

Renders children with negative margin overlap. When limit is set, excess avatars are replaced with a +N count badge using the same size as the other avatars.

Usage

import { AvatarGroup, Avatar } from "nosible-ux"

export default function Example() {
  return (
    <AvatarGroup limit={3}>
      <Avatar alt="Stuart Reid" />
      <Avatar alt="Jane Smith" />
      <Avatar alt="Alex Morgan" />
      <Avatar alt="Kim Chen" />
      <Avatar alt="Pat Walsh" />
    </AvatarGroup>
  )
}

Examples

With overflow

Accessibility

Each Avatar retains its individual alt text. The overflow badge has aria-label="+N more".

Props

Name	Type	Default	Description
`children`	`ReactNode`	—	Avatar elements to stack.
`limit`	`number \| undefined`	—	Maximum number of avatars to show. Excess are replaced with a "+N" badge.
`spacing`	`number \| undefined`	`8`	Negative horizontal overlap in pixels.

← All Components Getting Started →