Avatar

User avatar image with automatic initial-letter fallback built on Radix Avatar primitive.

// Radix — @radix-ui/react-avatar
import { Avatar } from "@shavin/ui";

Image with Fallback

Renders a profile picture with automatic graceful fallback to initials if the image fails to load or while loading.

<Avatar
  src="https://images.unsplash.com/photo-1524504388940-b1c1722653e1?q=80&w=1287&auto=format&fit=crop&q=80"
  alt="Kavya Sharma"
  fallback="KS"
  size="lg"
/>
<Avatar
  src="https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?q=80&w=1286&auto=format&fit=crop&q=80"
  alt="Elena Rostova"
  fallback="ER"
  size="lg"
/>
<Avatar
  src="https://images.unsplash.com/photo-1711024585660-48ea7317d1a9?q=80&w=1287&auto=format&fit=crop&q=80"
  alt="Marcus Chen"
  fallback="MC"
  size="lg"
/>
<Avatar
  src="https://broken-image-url.example/404.jpg"
  alt="Grace Hopper"
  fallback="GH"
  size="lg"
/>

Sizes (with image & fallback)

Component Source

<Avatar size="sm" src="https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?q=80&w=1286&auto=format&fit=crop&q=80" fallback="K" />
<Avatar size="md" src="https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?q=80&w=1286&auto=format&fit=crop&q=80" fallback="K" />
<Avatar size="lg" src="https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?q=80&w=1286&auto=format&fit=crop&q=80" fallback="K" />
<Avatar size="xl" src="https://images.unsplash.com/photo-1632765854612-9b02b6ec2b15?q=80&w=1286&auto=format&fit=crop&q=80" fallback="K" />

Fallback text

Component Source

<Avatar size="md" fallback="J" />
<Avatar size="md" fallback="AB" />
<Avatar size="md" fallback="?" />

Radius override — default is always "full", regardless of the Configurator

Explicit values (none/small/medium/large/full) are fixed regardless of the Configurator's Radius control — an avatar shouldn't go square just because "none" was picked globally. Only radius="inherit" (rightmost, "I") follows that shared setting — try changing Radius in the Configurator and watch only that one move.

Component Source

{/* explicit values are fixed regardless of the Configurator's Radius control */}
<Avatar size="lg" fallback="N" radius="none" />
<Avatar size="lg" fallback="F" radius="full" />
{/* only radius="inherit" follows the shared Radius setting */}
<Avatar size="lg" fallback="I" radius="inherit" />

Props

Prop	Type	Default	Description
src	string	—	Image source URL.
alt	string	—	Image alt text.
fallback	React.ReactNode	—	Text or letter fallback when image fails to load.
fallbackIcon	React.ReactNode	—	Custom icon fallback, e.g. `<Icon name="globe" size="sm" />` (inherits the fallback colour).
color	AvatarColor	`neutral`	Fallback fill colour: use with `fallbackIcon` or initials for project, workspace or team avatars. Default `neutral`.
variant	"soft" \| "solid"	—	`soft` (tinted, default) or `solid` (filled) when `color` is not neutral.
className	string	—	Optional custom CSS class name.
size	"sm" \| "md" \| "lg" \| "xl"	"md"	—
radius	"none" \| "small" \| "medium" \| "large" \| "full" \| "inherit" \| "concentric"	"full"	—