Density

Avatar

The avatar wraps Base UI’s avatar root, image, and fallback parts in one Density component for profile images and initials.

MCJL
import { Avatar, Panel } from "density-base-ui";

export default function AvatarExample() {
  return (
    <Panel>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem" }}>
        <Avatar alt="Maya Chen" fallback="MC" />
        <Avatar
          alt="Jordan Lee"
          fallback="JL"
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=96&q=80"
        />
      </div>
    </Panel>
  );
}

Props

Prop Attribute Values Default
alt None string Required
fallback None string Required
src None string None
size data-dn-size small, medium, large medium
delay None number 0
Other root span props Mixed HTMLAttributes<HTMLSpanElement> None

fallback is shown while the image is unavailable or has not loaded.

Size

sml
import { Avatar, Panel } from "density-base-ui";

const sizes = ["small", "medium", "large"] as const;

export default function AvatarSizeExample() {
  return (
    <Panel>
      <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem" }}>
        {sizes.map((size) => (
          <Avatar
            key={size}
            alt={`${size} avatar`}
            fallback={size.slice(0, 1)}
            size={size}
          />
        ))}
      </div>
    </Panel>
  );
}