Overlapped avatars with a +N chip: who can see this record, who is on the engagement. Pass the people as the users property and keep max small so the row stays scannable. The chip is plain text, so put a visible count beside the stack when the exact number matters.
Six people share the record and max is four, so the last two collapse into a +2 chip. Each avatar keeps its own name for assistive tech; the chip is plain text, so pair the stack with a visible count when the exact number matters.
xs 22, sm 26, md 32 and lg 40 px. The overlap is always 20% of the size behind a 2px ring, so the stack keeps its rhythm and two initials stay whole. The ring paints the surface; on another ground, set --sui-avatar-group-ring to that ground.
Avatar size: xs 22px, sm 26px, md 32px, lg 40px, xl 56px, the same ladder sui-avatar takes. Each avatar overlaps the previous by 20% of its size, ring included, so two initials clear the disc in front. The 2px ring paints --sui-avatar-group-ring (the surface by default): set it to the ground the stack sits on, var(--canvas) in a page header. Reflected.
users
property only
SuiAvatarGroupUser[]
[]
People to show: { name, initials?, src?, accent? }[]. Property, not attribute.
Types
SuiAvatarGroupSizetype
No members.
SuiAvatarGroupUserinterface
name?
string
initials?
string
src?
string
accent?
boolean
Theming
Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.