Avatar

Use GdsAvatar to represent a user with initials, an image, or an icon. Stack multiple avatars with GdsAvatarGroup when showing a team or participant list.

What GDS provides

Prop	GDS values	Notes
`size`	`large`, `medium`, `small`, `xsmall`	40 / 32 / 24 / 18 px; default `large`
`variant`	`circular`, `rounded`, `square`	Corner radius max / 4px / 0

All other props pass through to MUI Avatar (e.g. src, alt, children).

AvatarGroup adds stackSize (large 40px, medium 32px, small 24px), spacing (medium -8px, small -16px, or a custom number), and a +N overflow slot sized to match the stack. GDS supports up to 5 visible slots (avatars + overflow) via max.

Usage

<GdsAvatar alt="Jane Doe" size="large">
  OP
</GdsAvatar>

Size

Size	Container	Typography
`large`	40 × 40 px	Heading 3
`medium`	32 × 32 px	Heading 4
`small`	24 × 24 px	Body 3
`xsmall`	18 × 18 px	Caption

Shape

Status badge

Wrap the avatar in GdsBadge with variant="dot", color="success", and anchorOrigin set to bottom-right.

<GdsBadge
  variant="dot"
  color="success"
  overlap="circular"
  anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
>
  <GdsAvatar alt="User">OP</GdsAvatar>
</GdsBadge>

Grouped

GdsAvatarGroup stacks avatars with a 2px border between overlaps, using the avatar element color. Use max to limit visible avatars; pass total when the overflow count should differ from children.length.