Avatar

Display user profile images with fallback options for initials or default icons.

Import

import { Avatar } from '@akitectio/aki-ui'

Basic Usage

User avatar
<Avatar src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150" alt="User avatar" />
<Avatar>JD</Avatar>
<Avatar />

Sizes

Small
Medium
Large
Extra Large
<Avatar size="sm" src="..." alt="Small" />
<Avatar size="md" src="..." alt="Medium" />
<Avatar size="lg" src="..." alt="Large" />
<Avatar size="xl" src="..." alt="Extra Large" />

Fallback Options

With Initials

Default Icon

Custom Fallback

�
�
�
// With initials
<Avatar>AB</Avatar>

// Default icon
<Avatar />

// Custom fallback
<Avatar fallback="👤" />
<Avatar fallback="🐱" />

Status Indicators

Online user
Away user
Busy user
Offline user
// Online status
<div className="relative">
  <Avatar src="..." alt="Online user" />
  <div className="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></div>
</div>

// Away status  
<div className="relative">
  <Avatar src="..." alt="Away user" />
  <div className="absolute bottom-0 right-0 w-4 h-4 bg-yellow-500 border-2 border-white rounded-full"></div>
</div>

Avatar Groups

Stacked Avatars

User 1
User 2
User 3
User 4
+3

With Names

John Doe
John Doe
Software Engineer
Jane Adams
Product Manager
// Stacked avatars
<div className="flex -space-x-2">
  <Avatar src="..." alt="User 1" className="border-2 border-white" />
  <Avatar src="..." alt="User 2" className="border-2 border-white" />
  <Avatar src="..." alt="User 3" className="border-2 border-white" />
  <div className="flex items-center justify-center w-10 h-10 bg-gray-200 text-gray-600 rounded-full border-2 border-white text-sm font-medium">
    +3
  </div>
</div>

// With user info
<div className="flex items-center gap-3">
  <Avatar src="..." alt="John Doe" />
  <div>
    <div className="font-medium">John Doe</div>
    <div className="text-sm text-gray-500">Software Engineer</div>
  </div>
</div>

Interactive Avatars

<button className="relative group">
  <Avatar 
    src="..." 
    alt="Clickable avatar" 
    className="ring-2 ring-transparent group-hover:ring-blue-500 transition-all" 
  />
  <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-full transition-all"></div>
</button>

API Reference

PropTypeDefaultDescription
srcstring-Image source URL
altstring-Alt text for image
size'sm' | 'md' | 'lg' | 'xl''md'Avatar size
fallbackstring-Custom fallback content
classNamestring-Additional CSS classes
childrenReactNode-Fallback content (initials)

Accessibility

The Avatar component is built with accessibility in mind:

  • • Always include meaningful alt text for images
  • • Fallback text is announced by screen readers
  • • Interactive avatars support keyboard navigation
  • • Proper focus management and visual indicators
  • • Status indicators include accessible labels when needed
  • • Color is not the only way to convey status information