Avatar

Avatar renders a circular image for a person or organization and gracefully falls back to initials (or any node) when the image is absent or fails to load. It is composed of three parts: the Avatar root, an AvatarImage, and an AvatarFallback. Reach for it in nav bars, comment threads, assignee columns, and member lists.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: avatar.tsx

import { Avatar, AvatarImage, AvatarFallback } from "@beacon/design-system";

// Image with an initials fallback if it fails to load.
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

// No image available: the fallback shows.
<Avatar>
  <AvatarImage src="" alt="@user" />
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Parts

Part	Role
Avatar	Circular root container that clips its contents. Resize via className (defaults to h-10 w-10).
AvatarImage	The photo. Pass src and alt; it fills the root and is hidden if it fails to load.
AvatarFallback	Shown when the image is missing or still loading. Typically initials, but accepts any node.

Each part forwards the props of its underlying Radix Avatar primitive.

When to use

• Represent a user or organization in nav, headers, and menus.
• Show assignees or participants in lists, tables, and comment threads.
• Display a member roster or stacked avatar group.

Do not rely on AvatarImage alone without an AvatarFallback. Always provide a fallback so the avatar stays meaningful when the image is missing.