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 } from "density-base-ui";

export default function AvatarExample() {
  return (
    <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>
  );
}

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 } from "density-base-ui";

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

export default function AvatarSizeExample() {
  return (
    <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>
  );
}

Image and fallback

import { Avatar } from "density-base-ui";
import { ExampleRow } from "../ExampleLayout";
export default function AvatarFallbackExample() {
  return (
    <ExampleRow>
      <Avatar alt="Ada" fallback="AL" />
      <Avatar alt="Grace" fallback="GH" src="/missing-avatar.png" delay={500} />
    </ExampleRow>
  );
}