OXGN UI

Component Library

Avatar Component

A flexible avatar component that supports images, initials fallback, and various sizes. Used across the application for user profile display.

Sizes

JD
JD
JD
JD
JD
 
<Avatar size="xs" alt="John Doe" />
<Avatar size="sm" alt="John Doe" />
<Avatar size="md" alt="John Doe" />
<Avatar size="lg" alt="John Doe" />
<Avatar size="xl" alt="John Doe" />

With Images

John Doe
Sarah Smith
Mike Johnson
 
<Avatar 
  src="https://example.com/avatar.jpg"
  alt="John Doe"
  size="md"
/>

Border Styles

No Border
Thin Border
Thick Border
 
<Avatar borderStyle="none" />
<Avatar borderStyle="thin" />
<Avatar borderStyle="thick" />

Fallback Initials

JD
SS
MJ
AW
 
<Avatar alt="John Doe" />
<Avatar alt="Sarah Smith" />
<Avatar alt="Mike Johnson" />
<Avatar alt="Alex Wilson" fallback="AW" />

Props Reference

Prop Type Default Description
src string undefined Image source URL
alt string required Alt text for accessibility
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md' Avatar size
fallback string undefined Custom fallback text
borderStyle 'none' | 'thin' | 'thick' 'none' Border style
className string undefined Additional CSS classes