A row of overlapping avatar circles, each rimmed with the page background, for showing several people (like a team or participant list) as one compact pile.
import AvatarGroup from "@/components/ui/avatar-group";
function Face({ label, background }: { label: string; background: string }) {
return (
<span
aria-label={label}
title={label}
style={{
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
blockSize: "2em",
inlineSize: "2em",
borderRadius: "9999px",
background,
color: "var(--bs-color-ink-on-primary, #fff)",
fontSize: "0.75em",
letterSpacing: "0.02em",
userSelect: "none",
}}
>
{label}
</span>
);
}
/** Avatars overlap one row, each rimmed in the ground so the pile stays
* legible. */
export default function AvatarGroupDemo() {
return (
<div className="flex min-h-[200px] w-full items-center justify-center bg-background p-8">
<AvatarGroup>
<Face label="Q" background="var(--bs-color-info)" />
<Face label="C" background="var(--bs-color-success)" />
<Face label="Z" background="var(--bs-color-danger)" />
<Face label="T" background="var(--bs-color-warning)" />
</AvatarGroup>
</div>
);
}
