i

Avatar group

Showing state and identity · researched

A row of overlapping avatars collapsing extras into a count.

molecule · also called Avatar stack · contains avatar

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Avatar.Group native: no antd 6.6.5
Variants
—
Sizes
large, medium, small
States documented
—
Accessibility guidance
no

Overlapping avatars with maxCount and a +N overflow popover (docs list max-related props).

docs ↗ · code ↗

Carbon

absentCarbon does not ship this component. Nothing is drawn in its place.

Checked docs components list and both source directories. Only a single UserAvatar exists (unpublished: its export is commented out in react index.ts); no stack or group component.

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked: component index (https://design-system.service.gov.uk/components/ , 37 components), patterns index, styles index, repo tree src/govuk/components and objects, and installed govuk-frontend 6.5.1 components directory. No avatar component at all; no 'avatar' hit in the docs index text or repo tree.

Material Web

absentMaterial Web does not ship this component. Nothing is drawn in its place.

Checked docs/components (20 component pages), the repo top-level dirs, labs/, labs/gb/components and the installed 2.5.0 package. No avatar element at all; md-list-item has an avatar slot only (list.md).

Primer

AvatarStack native: no
shipped, not drawn herePrimer documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
cascade, stack
Sizes
—
States documented
hover
Accessibility guidance
no

Primer React. div-based stack of Avatars; status ready. No accessibility page on primer.style (the page 404s).

1 corrected on re-read
  • states_documented: null → ["hover"] Example No spread on hover; stack spreads on hover by default

docs ↗ · code ↗

Spectrum

Avatar group subset native: no
shipped, not drawn hereSpectrum documents this component, but it could not be drawn from the package used for the frames. The note below says why.
Variants
—
Sizes
16, 20, 24, 28, 32, 36, 40
States documented
default, disabled
Accessibility guidance
no

Implementation: S2 AvatarGroup (div role=group with overlapped avatars, size 16 to 40 from source); no v3, SWC or CSS counterpart. Subset: I found no collapse of extras into a count in AvatarGroup.tsx. Not in installed SWC 1.12.4 (avatar is installed, avatar-group is not). The rsp page has no accessibility section.

docs ↗ · code ↗

USWDS

absentUSWDS does not ship this component. Nothing is drawn in its place.

Checked the docs component index and status page and the develop packages/ tree (88 entries, matching installed 3.14.0): no avatar or avatar group component.

Platform facts

Native elementnot recordedNo source defines an avatar group; MDN img_role describes combining elements as a single image with aria-label (role img), which could apply to the group but is not stated for avatars.
Baseline—
APG patternnone
ARIA role—
Shipped by3 of 7 systems

Anatomy

    The seven states

    default Overlapping avatars with a count.
    hover n/a — Not interactive.
    focus n/a — Not focusable by default.
    active n/a — Not interactive.
    disabled n/a — Not defined by APG or HTML.
    error n/a — Not defined by APG or HTML.
    loading n/a — Not defined by APG or HTML.

    Every cell was read twice, the second time from raw sources by a separate pass. 1 of 35 fields changed on the second read — open any “corrected” note to see what it said before.