Data display

Avatar

Displays an image or fallback identity, with optional status and grouping.

@dawn/ui/components/avatar

Preview

Rendered from @dawn/ui

AKJMSL

ALJBTS

Usage

import {
  Avatar,
  AvatarBadge,
  AvatarFallback,
  AvatarGroup,
  AvatarGroupCount,
} from "@dawn/ui/components/avatar";

export const CareTeam = () => (
  <AvatarGroup>
    <Avatar>
      <AvatarFallback>AK</AvatarFallback>
      <AvatarBadge />
    </Avatar>
    <Avatar>
      <AvatarFallback>JM</AvatarFallback>
    </Avatar>
    <AvatarGroupCount>+2</AvatarGroupCount>
  </AvatarGroup>
);

API

sizesm | default | lg: Sets the root and fallback dimensions.
AvatarImageRadix Avatar.Image props: Loads an image and defers to the fallback when it is unavailable.
AvatarBadgespan props: Positions a compact status marker on the avatar.

Exports

AvatarAvatarImageAvatarFallbackAvatarBadgeAvatarGroupAvatarGroupCount