Data

Avatar

User avatar with image source, deterministic initials fallback, presence status and an overlapping AvatarGroup with overflow counter.

Import

import { Avatar, AvatarGroup } from "@zephora/react";

Examples

Sizes and fallback

Broken or missing images fall back to initials colored deterministically from `name`.

ALGHATKJ

<Avatar name="Ada Lovelace" size="xs" />
<Avatar name="Grace Hopper" size="sm" />
<Avatar name="Alan Turing" size="md" />
<Avatar name="Katherine Johnson" size="lg" />
<Avatar name="Margaret Hamilton" size="xl" src="/broken.png" />

Status and shape

The presence dot announces itself with a matching aria-label.

ALGHATBL

<Avatar name="Ada Lovelace" status="online" />
<Avatar name="Grace Hopper" status="busy" />
<Avatar name="Alan Turing" status="away" shape="square" />
<Avatar name="Barbara Liskov" status="offline" shape="square" />

Group with overflow

`max` collapses the remaining avatars into a +N counter.

ALGHAT+2

<AvatarGroup max={3} size="md">
  <Avatar name="Ada Lovelace" />
  <Avatar name="Grace Hopper" />
  <Avatar name="Alan Turing" />
  <Avatar name="Katherine Johnson" />
  <Avatar name="Donald Knuth" />
</AvatarGroup>

API

Avatar props

Prop	Type	Default	Description
`src`	`string`	—	Image source. Broken images automatically fall back to initials.
`alt`	`string`	—	Accessible label for the image / fallback. Defaults to `name`.
`name`	`string`	—	Person name — used for the initials fallback and its deterministic background color.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Avatar dimensions.
`shape`	`"circle" \| "square"`	`"circle"`	Outline shape.
`status`	`"online" \| "offline" \| "busy" \| "away"`	—	Presence indicator dot with a matching aria-label.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

AvatarGroup props

Prop	Type	Default	Description
`max`	`number`	—	Maximum avatars shown; the rest collapse into a "+N" counter.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	—	Size applied to every child avatar.
`shape`	`"circle" \| "square"`	`"circle"`	Shape applied to the overflow counter.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.