Avatar

User avatar with image, initials fallback, and status indicator.

Basic Usage

JD
JS
AJ

Sizes

XS
SM
MD
LG
XL
2X

Status Indicators

ON
OF
BU
AW

Features

  • Image Support - Display user photos
  • Initials Fallback - Auto-generated from name
  • Color Generation - Consistent colors based on name
  • Status Indicators - Show online/offline/busy/away
  • Image Error Handling - Falls back to initials on load failure

Props

PropTypeDefaultDescription
src string-Image URL
alt string-Alt text for image
name string-Name for initials fallback
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl''md'Avatar size
status 'online' | 'offline' | 'busy' | 'away'-Status indicator