humanonlyweb/ui

Avatar Group

Stacked avatars with an overflow count.

Markdown

Examples

Capped

max includes the “+N” chip: with max 4, you get three avatars and “+3”.

ALGHAT +3
Copy code

API

PropTypeDefault
items

People to show, in order.

AvatarItem[][]
max

Most circles to show, counting the "+N" chip: max 4 shows 3 avatars and "+N".

number—
size

Size passed to every avatar.

"small" | "medium" | "large""medium"
overflowLabel

Spoken name of the "+N" chip, e.g. (n) => \${n} more recipients\`. Defaults to the moreAvatars` translation.

((count: number) => string)—

Types

export interface AvatarItem {
  name: string;
  src?: string;
  id?: string | number;
}
Copy code

Styling

Parts
avatar-groupavataravatar-image
States
data-avatar-sizedata-avatar-overflow

Accessibility

  • Screen readers hear the “+N” chip as “3 more”. Use overflow-label to say more, e.g. “3 more people”.