AvatarStack

AvatarStack is a compound component for overlapping avatar groups such as participants, reviewers, and team previews.

Overview

AvatarStack styling is intentionally small. The root only establishes horizontal layout, and the overlap effect is driven by AvatarStackItem mask and margin behavior.

Public CSS Variables

Variable	Value	Affects
base size for overlap and hover spreaditem overlap math		No visible change in this state
inner overlap offsetitem overlap math		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root uses display: flex.

Item

Non-first items compute a radial mask from --avatar-size, creating the overlap cutout. Hover temporarily removes the mask and adds inline margin.

State And Variant Interaction

size comes from shared avatar context
hover affects overlap spacing for the hovered item and its neighbor
variant is inherited from the avatar context rather than stack-specific CSS

Examples

Stack sizes

LTRRTL

small-overlapping-avatars.tsx · 27 lines

import { AvatarFallback, AvatarStack, AvatarStackItem, Text } from '@vega-ui/react';

const sizes = ['xs', 'sm', 'md', 'lg'];
const people = [
  { name: 'Maria Chen', initials: 'MC' },
  { name: 'Omar Haddad', initials: 'OH' },
  { name: 'Lena Fischer', initials: 'LF' },
];

export default function SmallOverlappingAvatars() {
  return (
    <div style={{ display: 'grid', gap: 'var(--spacing-6)' }}>

Do Not Override

mixing avatar sizes within one stack
removing the overlap mask without revisiting spacing behavior