Avatar

Displays a user's profile image or initials

Usage

Show a user's profile picture with a graceful fallback when no image is available or it fails to load.

import { Avatar } from "@elemnts-ui/react";

<Avatar>
  <Avatar.Image src="..." alt="..." />
  <Avatar.Fallback>JD</Avatar.Fallback>
</Avatar>;

Control the avatar size with the size prop.

Change the avatar shape by applying a specific borderRadius value or using style props.

Switch the avatar’s visual style using the variant prop.

Customize the avatar’s background and text colors using colorPalette.

Add an outline ring around the avatar using the outline style props.

Add a status or notification badge to the avatar using Badge.

The root component for the avatar.

Prop	Type	Default
size	`2xs` \| `xs` \| `sm` \| `md` \| `lg` \| `xl` \| `2xl`	`md`
variant	`primary` \| `secondary` \| `tetriary` \| `ghost` \| `surface`	`primary`
asChild	`boolean`	`false`

The image component for the avatar.

Show the fallback content when the avatar image fails to load.

Prop	Type	Default
children	`ReactNode`	`undefined`
asChild	`boolean`	`false`