Avatar

User or entity image with fallback.

stableBase UI Avatar

Preview

ALJDMKOP

Code

tsx

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Avatar size="sm"><AvatarFallback>AL</AvatarFallback></Avatar>
      <Avatar>
        <AvatarImage src="/avatar.png" alt="" />
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>
      <Avatar size="lg"><AvatarFallback>MK</AvatarFallback></Avatar>
    </div>
  );
}

Props

Prop	Type	Default	Description
size	`"sm" \| "md" \| "lg" \| "xl"`	"md"	Avatar size: 24px / 32px / 40px / 56px.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Sub-components

AvatarImage— The image source.

Prop	Type	Default	Description
src	`string`	—	Image URL.
alt	`string`	—	Alternative text.

AvatarFallback— Text shown if the image fails or is loading. Usually initials.

Built on Base UI Avatar. Fallback renders immediately while the image loads.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/avatar.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

"use client";

import { cn } from "@/lib/utils";
import { Avatar as BaseAvatar } from "@base-ui-components/react/avatar";
import { type VariantProps, cva } from "class-variance-authority";
import type { ComponentPropsWithoutRef } from "react";

const avatarVariants = cva(
  "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-bg-muted text-fg-muted",
  {
    variants: {
      size: {
        sm: "h-6 w-6 text-[10px]",
        md: "h-8 w-8 text-xs",
        lg: "h-10 w-10 text-sm",
        xl: "h-14 w-14 text-base",
      },
    },
    defaultVariants: { size: "md" },
  },
);

export interface AvatarProps
  extends ComponentPropsWithoutRef<typeof BaseAvatar.Root>,
    VariantProps<typeof avatarVariants> {}

export function Avatar({ className, size, ...props }: AvatarProps) {
  return <BaseAvatar.Root className={cn(avatarVariants({ size }), className)} {...props} />;
}

export function AvatarImage({
  className,
  ...props
}: ComponentPropsWithoutRef<typeof BaseAvatar.Image>) {
  return <BaseAvatar.Image className={cn("h-full w-full object-cover", className)} {...props} />;
}

export function AvatarFallback({
  className,
  ...props
}: ComponentPropsWithoutRef<typeof BaseAvatar.Fallback>) {
  return (
    <BaseAvatar.Fallback
      className={cn("inline-flex h-full w-full items-center justify-center font-medium", className)}
      {...props}
    />
  );
}

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmAvatar (extends StackPane). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmAvatar;

PrizmAvatar()
PrizmAvatar(Size size)
PrizmAvatar(String initials, Size size)

Prop	Type	Default	Description
Size	`enum { SM, MD, LG, XL }`	MD	Diameter in px (24 / 32 / 40 / 56), mirroring the web sizes.
setInitials	`(String) → void`	—	Fallback text shown when there's no image.
setImage	`(Image) → void`	—	Image clipped to the circle, over the fallback. Pass null to clear.
setSize	`(Size) → void`	—	Set the diameter from the scale.

A composite over StackPane (no stock 1:1 control) — a muted circular background with an initials fallback and an optional clipped image. Styled by the .prizm-avatar rules. Mirrors Avatar + AvatarImage + AvatarFallback in components/ui/avatar.tsx.