AvatarGroup

An avatar group is a grouping of avatars that are related to each other.

123 members

label

size

import {AvatarGroup, Avatar} from '@react-spectrum/s2';

<AvatarGroup
  aria-label="Collaborators"
  label="123 members">
  <Avatar
    alt="Abraham Baker"
    src="https://www.untitledui.com/images/avatars/abraham-baker" />
  <Avatar
    alt="Adriana Sullivan"
    src="https://www.untitledui.com/images/avatars/adriana-sullivan" />
  <Avatar
    alt="Jonathan Kelly"
    src="https://www.untitledui.com/images/avatars/jonathan-kelly" />
  <Avatar
    alt="Zara Bush"
    src="https://www.untitledui.com/images/avatars/zara-bush" />
</AvatarGroup>

API

<AvatarGroup>
  <Avatar />
</AvatarGroup>

AvatarGroup

Name	Type	Default
`children`	`ReactNode`	Default: —
Avatar children of the avatar group.
`size`	`16 \| 20 \| 24 \| 28 \| 32 \| 36 \| 40`	Default: `24`
The size of the avatar group.
`styles`	`StylesPropWithoutWidth`	Default: —
Spectrum-defined styles, returned by the `style()` macro.