Avatar

import { Avatar, AvatarGroup } from '@yarcl/react';

<Avatar name="Ada Lovelace" src="/ada.jpg" />
<Avatar name="Grace Hopper" color="success" />

name supplies the accessible name and turns into initials when no image is available. Use fallback for custom fallback content, and alt="" for a decorative avatar. If an image fails to load, the fallback appears automatically.

Groups

AvatarGroup overlaps direct Avatar children. Its token props become defaults for any child that does not set its own value. Set max to limit the visible avatars and total when more people exist than the rendered children.

<AvatarGroup max={3} total={5} aria-label="Project members">
  <Avatar name="Ada Lovelace" />
  <Avatar name="Grace Hopper" />
  <Avatar name="Alan Turing" />
</AvatarGroup>

Tokens and accessibility

size sets the diameter from sizes; radius, color and variant style the fallback from their matching config groups. Configure defaults under components.Avatar or components.AvatarGroup.

An avatar with a name or alt renders as an image with that accessible name. Avatar is presentational and has no keyboard interaction. Use an accessible Button or link around it when it triggers an action, and label each group when its membership needs context.

Props

Avatar

Prop	Type	Default	Description
`alt`	`string`		Alternative text for the avatar. Pass an empty string for a decorative avatar.
`color`	`Color`config	`config.defaults.color`	Fallback color from the `colors` config.
`fallback`	`ReactNode`		Content shown instead of initials when no image is available.
`name`	`string`		Person's name. Used for the fallback initials and accessible name when `alt` is omitted.
`onImageError`	`() => void`		Called after the image fails to load.
`radius`	`'size' \| Radius`config	`'rounded'`	Corner radius from the `radii` config.
`size`	`'lg' \| 'xs' \| 'sm' \| 'md' \| 'xl'`	`config.defaults.size`	Diameter from the `sizes` config.
`src`	`string`		Image URL. When it cannot load, the fallback is shown.
`variant`	`Variant`config	`config.defaults.softVariant`	Fallback style recipe from this component's variant map or shared `variants`.

AvatarGroup

Prop	Type	Default	Description
`children`	`ReactNode`		Direct `Avatar` children to arrange in an overlapping row.
`color`	`Color`config	`config.defaults.color`	Fallback color from the `colors` config.
`max`	`number`		Maximum number of avatars to show before an overflow count.
`overflowLabel`	`(count: number) => string`		Accessible label for the overflow count. Receives the number of hidden avatars.
`radius`	`'size' \| Radius`config	`config.defaults.radius`	Avatar corner radius from the `radii` config.
`size`	`'lg' \| 'xs' \| 'sm' \| 'md' \| 'xl'`	`config.defaults.size`	Avatar diameter from the `sizes` config.
`total`	`number`		Total number of people when not every avatar is rendered. Used with `max`.
`variant`	`Variant`config	`config.defaults.softVariant`	Fallback style recipe from this component's variant map or shared `variants`.