Avala Design
← Components/primitives

Avatar

User / entity avatar. Wraps Radix Avatar primitives so image loading fails over to a fallback (text initials, icon, or any node).

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Avatar, AvatarFallback, AvatarImage } from "@avala/design";

<Avatar size="md" shape="circle">
  <AvatarFallback />
  <AvatarImage />
</Avatar>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-avatar--defaultOpen in Storybook →

When to use

  • Display a user's photo with text-initials fallback when the image fails or is loading.
  • Anywhere user / org / team identity needs a compact visual marker (member lists, comment threads, kanban tile assignees, the toolbar profile slot).
  • Compose with `Tooltip` to surface the user's name on hover.

When not to use

  • Generic decorative imagery → use a plain <img>. Avatar carries identity semantics.
  • Stand-alone status indicators → use `Badge` or StatusIndicator (pattern).