Ink UI

Avatar

Displays a user's profile picture, initials, or fallback icon.

AvatarExample
IUBU

Examples

Fallback

Render initials when the image fails to load or is not provided.

AvatarFallbackExample
IUER

Sizes

Use the size prop to change the avatar size. Available sizes are sm, default, and lg.

AvatarSizesExample
IUIUIU

Installation

Copy the source code below into your project:

tsx
import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
import { cn } from "@/lib/utils";

function Avatar({
  className,
  size = "default",
  ...props
}: BaseAvatar.Root.Props & {
  size?: "sm" | "default" | "lg";
}) {
  return (
    <BaseAvatar.Root
      className={cn(
        "group/avatar relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full align-middle select-none",
        "size-8 data-[size=lg]:size-10 data-[size=sm]:size-6",
        className,
      )}
      data-size={size}
      data-slot="avatar"
      {...props}
    />
  );
}

function AvatarImage({ className, ...props }: BaseAvatar.Image.Props) {
  return (
    <BaseAvatar.Image
      className={cn("aspect-square size-full object-cover", className)}
      data-slot="avatar-image"
      {...props}
    />
  );
}

function AvatarFallback({ className, ...props }: BaseAvatar.Fallback.Props) {
  return (
    <BaseAvatar.Fallback
      className={cn(
        "flex size-full items-center justify-center rounded-full bg-muted text-sm font-medium text-muted-foreground",
        "group-data-[size=lg]/avatar:text-base group-data-[size=sm]/avatar:text-xs",
        className,
      )}
      data-slot="avatar-fallback"
      {...props}
    />
  );
}

export { Avatar, AvatarImage, AvatarFallback };

API Reference

Avatar

The Avatar component extends the Base UI Avatar.Root props and adds the following:

PropTypeDefaultDescription
size"sm" | "default" | "lg""default"Size of the avatar.

AvatarImage

This component does not add any props on top of Base UI Avatar.Image. See the Base UI docs for the full API reference.

AvatarFallback

This component does not add any props on top of Base UI Avatar.Fallback. See the Base UI docs for the full API reference.