Avatar

FGGKCS

Installation

pnpm dlx shadcn@latest add https://dev.designsystem.wfp.org/r/avatar.json

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";

<Avatar>
  <AvatarImage src="…" alt="@johndoe" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Use AvatarFallback to display user initials or an icon when no image is available.

FGGK

Use the size prop to change the size of the avatar.

FGFGFG

Use the AvatarBadge component to add a badge indicator to the avatar. The badge is positioned at the bottom right.

FGGKCS

Use the AvatarGroup component to add a group of avatars.

Use <AvatarGroupCount> to add a count to the group.

FGGKCS

The Avatar component is the root component that wraps the avatar image and fallback.

Prop	Type	Default
`size`	`"sm" \| "default" \| "lg"`	`"default"`

The AvatarImage component displays the avatar image. It accepts all Radix UI Avatar Image props.

The AvatarFallback component displays a fallback when the image fails to load. It accepts all Radix UI Avatar Fallback props.

The AvatarBadge component displays a badge indicator on the avatar, typically positioned at the bottom right.

The AvatarGroup component displays a group of avatars with overlapping styling.

The AvatarGroupCount component displays a count indicator in an avatar group, typically showing the number of additional avatars.

For more information about Radix UI Avatar props, see the Radix UI Avatar documentation.