Data display

Initials avatar

Derives a compact two-letter identity from a label with a stable semantic tone.

@dawn/ui/components/initials-avatar

Preview

Rendered from @dawn/ui

ALJBTMSSMA

Usage

import { InitialsAvatar } from "@dawn/ui/components/initials-avatar";

export const PatientAvatar = () => (
  <InitialsAvatar label="Ada Lovelace" size="lg" tone="violet" />
);

API

labelstring: Required accessible name and source for the displayed initials.
sizesm | default | lg: Sets the avatar and type dimensions.
toneblue | coral | green | neutral | violet: Sets the fallback background and foreground color.

Exports

InitialsAvatarinitialsAvatarVariants