Avatar

A circular user portrait that shows a profile image and automatically falls back to initials text when the image is missing or fails to load.

bysages

bybysages

"use client";

import { Avatar } from "@/components/ui/avatar";
import { useState } from "react";

/** The load reports home: status changes land in the readout. */
export default function AvatarEventsDemo() {
  const [status, setStatus] = useState("pending");
  return (
    <div style={{ display: "grid", gap: "0.75rem", justifyItems: "start" }}>
      <output
        style={{
          fontSize: "var(--bs-font-size-sm)",
          color: "var(--bs-color-text-secondary)",
        }}
      >
        status: {status}
      </output>
      <Avatar.Root
        onStatusChange={(e: { status: string }) => setStatus(e.status)}
      >
        <Avatar.Fallback>PA</Avatar.Fallback>
        <Avatar.Image
          src="https://localhost/broken-portrait.png"
          alt="Portrait"
        />
      </Avatar.Root>
    </div>
  );
}