Data Display

AvatarGroup

View in Figma

Stacks two or more Avatar instances horizontally with a negative gap so each avatar overlaps the next. The group has a single Root slot; consumers fill it with any number of Avatar components at any supported size.

Overview

Stacks two or more Avatar instances horizontally with a negative gap so each avatar overlaps the next. The group has a single Root slot; consumers fill it with any number of Avatar components at any supported size.

JS

Anatomy

AvatarGroup
JS
  1. 1Container  required
  2. 2Root  required  Slot. A horizontal auto-layout row that receives Avatar instances. The negative gap between items creates the overlap stack effect.

Measurements

JS
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Root
Overlap gap between stacked avatars
spacingGapNegativeLg
-12pt
Avatar
Avatar surface fill (acts as separator ring between overlapping avatars)
colorBackgroundPrimary
#FFFFFF
Avatar border ring color
colorBorderSecondary
#D3D5D8
Avatar corner radius (circle shape)
radiusPill
Pill

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
RootslotAvatar instances

Accessibility

Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.