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>
);
}
/** Size them from the outside: one font-size resizes the whole pile. */
export default function AvatarGroupLargeDemo() {
return (
<div className="flex min-h-[200px] w-full items-center justify-center bg-background p-8">
<AvatarGroup style={{ fontSize: "1.25rem" }}>
<Face label="L" background="var(--bs-color-primary)" />
<Face label="M" background="var(--bs-color-warning)" />
</AvatarGroup>
</div>
);
}
