Avatar Stack

An overlapping avatar row that fans apart on hover with springy name tooltips.

@spectrumui/avatar-stack
Project team7 members · 3 online

Hover the stack — then hover a face

Installation

Login to view commandCreate a free account to access the install command

Usage

import { AvatarStack } from "@/components/spectrumui/avatar-stack"
<AvatarStack
  items={[
    { name: "Arjun Mehta", src: "/avatars/01.png" },
    { name: "Priya Nair" },
    { name: "Noah Kim" },
  ]}
  onAvatarClick={(item) => console.log(item.name)}
/>

API Reference

AvatarStack

Renders a role="group" of avatar buttons with roving arrow-key focus; each item is an AvatarItem of shape { name: string; src?: string }. When src is omitted, initials are derived from the first two words of name. The name also becomes the button's aria-label and the tooltip text, and Escape collapses an expanded stack.

PropTypeDefaultDescription
*itemsAvatarItem[]-People to render; the first max are visible, the rest sit behind the +N pill
maxnumber4Number of avatars shown before overflowing into the +N pill
size"sm" | "md" | "lg""md"Avatar diameter: 28, 36 or 44px
expandablebooleantrueWhether clicking the +N pill expands the hidden avatars with a stagger
onAvatarClick(item: AvatarItem, index: number) => void-Fires when an avatar is clicked or activated with Enter/Space
classNamestring-Additional classes merged onto the group container

Examples

Sizes

sm
md
lg
+2
expandable=false — the +2 pill stays put