"use client"; import { useState } from "react"; import { cn } from "@/lib/utils"; export type AvatarStatus = "online" | "offline" | "busy" | "away"; export interface AvatarProps { /** Display name — used for the accessible label and the initials fallback. */ name: string; src?: string; size?: "sm" | "md" | "lg"; status?: AvatarStatus; className?: string; } const SIZES: Record, string> = { sm: "size-8 text-xs", md: "size-10 text-sm", lg: "size-14 text-base", }; const STATUS: Record = { online: "bg-emerald-500", offline: "bg-muted-2", busy: "bg-rose-500", away: "bg-amber-500", }; function initials(name: string) { return name .trim() .split(/\s+/) .slice(0, 2) .map((w) => w[0]?.toUpperCase() ?? "") .join(""); } /** * Avatar — a circular user image that falls back to initials if no src is given * or the image fails to load, with an optional status dot. The accessible name * is always the person's name. */ export function Avatar({ name, src, size = "md", status, className }: AvatarProps) { const [errored, setErrored] = useState(false); const showImage = !!src && !errored; return ( {showImage ? ( // eslint-disable-next-line @next/next/no-img-element -- portable, framework-agnostic avatar {name}

setErrored(true)} className="size-full object-cover" /> ) : ( <> {initials(name)} {name} )} {status && ( )} ); }

Prop	Type	Default	Description
`name`*	`string`	`—`	Display name — used for the label and initials fallback.
`src`	`string`	`—`	Image URL; falls back to initials on error.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Avatar size.
`status`	`"online" \| "offline" \| "busy" \| "away"`	`—`	Optional status dot.
`className`	`string`	`—`	Extra classes.

Avatar

Customize

Props