Avatar

Display

Represents a user or entity. Displays a photo, or gracefully falls back to initials.

Preview

JD

Jane Doe

No status

Props API

PropTypeDefaultDescription
namestring"Jane Doe"Full name — used for the initials fallback and alt text
srcstring""Image URL — leave empty to render initials
sizeselect"xs" | "sm" | "md" | "lg" | "xl""md"Size of the avatar
shapeselect"circle" | "square""circle"Border radius shape
statusselect"none" | "online" | "offline" | "busy" | "away""none"Presence indicator badge

Usage

For image-based avatars, provide square images for best results. The initials fallback uses a deterministic color derived from the name string.

Accessibility

  • Image avatars always include alt text derived from the name prop.

  • When used without an accompanying visible name, wrap in an element with aria-label.

  • Presence status badges include a visually hidden text description.