Avatar Group Button

An overlapping stack of real photo avatars, capped with a +N overflow bubble, as a single clickable trigger for a team panel — iOS group-chat style.

Buttonsbuttonavataravatar-stack

Stack: React + Tailwind CSS + shadcn/ui — every prompt is written for this stack and is most accurate in it.

Overview

Layout

3 photos + a +N bubble, -space-x-2 overlap

Avatars

Real photos, ring-2 ring-card separation

Overflow

+N shown as its own avatar-shaped bubble

Motion

200ms lift + shadow on hover