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

export default function AvatarExample() {
  return (
    <View orientation="horizontal" padding={false} wrap>
      <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"
      />
    </View>
  );
}

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

Size

2xssmlxl2x3x
import { Avatar, View } from "density-base-ui";

export default function AvatarSizeExample() {
  return (
    <View orientation="horizontal" padding={false} wrap>
      <Avatar alt="2xs avatar" fallback="2" size="2xs" />
      <Avatar alt="extra small avatar" fallback="xs" size="xs" />
      <Avatar alt="small avatar" fallback="s" size="sm" />
      <Avatar alt="medium avatar" fallback="m" size="md" />
      <Avatar alt="large avatar" fallback="l" size="lg" />
      <Avatar alt="extra large avatar" fallback="xl" size="xl" />
      <Avatar alt="2xl avatar" fallback="2x" size="2xl" />
      <Avatar alt="3xl avatar" fallback="3x" size="3xl" />
    </View>
  );
}

Image and fallback

AL
import { Avatar, View } from "density-base-ui";
export default function AvatarFallbackExample() {
  return (
    <View align="center" gap="md" orientation="horizontal" padding={false} wrap>
      <Avatar alt="Ada" fallback="AL" />
      <Avatar alt="Grace" fallback="GH" src="/missing-avatar.png" delay={500} />
    </View>
  );
}