Skip to main content

Avatar()

Avatar(__namedParameters): Element

Avatar - A user profile image component with fallback support

Displays a user's profile image with automatic fallback to a default person icon when the image fails to load. Supports multiple sizes and can include status badges. Built on Radix UI Avatar for accessibility and reliability.

Parameters​

__namedParameters​

AvatarProps

Returns​

Element

Examples​

// Basic avatar with image
<Avatar imageProps={{ src: "/user.jpg", alt: "User Name" }} />
// Avatar with fallback and custom size
<Avatar
  size="large"
  imageProps={{ src: "/user.jpg", alt: "User Name" }}
  fallbackProps={{ children: "UN" }}
/>
// Avatar with status badge
<Avatar imageProps={{ src: "/user.jpg", alt: "User Name" }}>
  <Badge variant="success" />
</Avatar>
// Avatar with only initials fallback
<Avatar fallbackProps={{ children: "JD" }} />