AvatarStack

stable

Overlapping avatar circles showing multiple users or active sessions with overflow count

import { AvatarStack } from "@nodus/design-system/patterns"

Loading demo…

Props

Prop	Type	Default	Description
`users`req	`AvatarUser[]`	—	Array of users with name and optional avatarUrl
`max`	`number`	4	Max visible avatars before +N overflow
`size`	`number`	32	Avatar diameter in pixels
`overlap`	`number`	8	Overlap offset in pixels

usersrequired

Type AvatarUser[]Default —

Array of users with name and optional avatarUrl

max

Type numberDefault 4

Max visible avatars before +N overflow

size

Type numberDefault 32

Avatar diameter in pixels

overlap

Type numberDefault 8

Overlap offset in pixels

Design Rationale

This component was designed to express:

User profile with avatar, role badge, permissions summary, last login, and sign-out action

Colored dot indicating idle, active, pending, error, or completed state

Colored label for status, trust level, or category

Was this helpful?