BricksLab Catalog

@brickslab/ui-web

Stacked avatar circles component with overlap and counter badge. Shows a maximum number of avatars with a +N indicator for remaining users. Perfect for team displays, collaborators, and user groups.

Aperçu

Basic Stack (3 avatars)

With People Count Label

42 people

Max 4 with +N Badge

18 people

Larger Size (60px) with Custom Overlap

With Clickable Profile Links

Props Table

Prop	Type	Défaut	Requis	Description
`avatarUrls`	`array: { imageUrl, profileUrl? }[]`	—	✓	Array of avatar objects with image URL and optional profile link.
`size`	`number`	`40`	—	Avatar diameter in pixels.
`overlap`	`number`	`10`	—	Overlap between stacked avatars in pixels.
`max`	`number`	`5`	—	Maximum number of avatars to show. Remaining count shown as +N badge.
`numPeople`	`number`	—	—	Total people count to display as label (e.g., '42 people').
`showTooltip`	`boolean`	`false`	—	Show avatar URL as tooltip on hover.
`className`	`string`	—	—	Additional CSS class for custom styling.

Usage

tsx

import { AvatarCircles } from "@brickslab/ui-web";

const avatars = [
  { imageUrl: "https://i.pravatar.cc/150?u=1" },
  { imageUrl: "https://i.pravatar.cc/150?u=2" },
  { imageUrl: "https://i.pravatar.cc/150?u=3" },
];

// Basic usage
<AvatarCircles avatarUrls={avatars} />

// With people count
<AvatarCircles 
  avatarUrls={avatars} 
  numPeople={42}
  max={5}
/>

// Custom size and overlap
<AvatarCircles 
  avatarUrls={avatars}
  size={50}
  overlap={15}
/>

// With profile links
<AvatarCircles 
  avatarUrls={[
    { imageUrl: "...", profileUrl: "/profile/user1" },
    { imageUrl: "...", profileUrl: "/profile/user2" }
  ]}
/>