Avatar

Display user profile images with automatic fallbacks.

Features

• Image with fallback to initials
• Multiple sizes (xs, sm, md, lg, xl)
• Shapes (circle, square, rounded)
• Status indicator support
• Group avatars with overlap
• Loading state

Usage

Web (React)

import { Avatar } from '@cuppa/ui'

<Avatar src="/profile.jpg" alt="John Doe" />
<Avatar name="John Doe" /> {/* Shows "JD" */}
<Avatar name="John Doe" status="online" />

iOS (SwiftUI)

import CuppaUI

CuppaAvatar(src: "/profile.jpg", alt: "John Doe")
CuppaAvatar(name: "John Doe") // Shows "JD"
CuppaAvatar(name: "John Doe", status: .online)

Android (Jetpack Compose)

import com.cuppa.ui.components.CuppaAvatar

CuppaAvatar(src = "/profile.jpg", alt = "John Doe")
CuppaAvatar(name = "John Doe") // Shows "JD"
CuppaAvatar(name = "John Doe", status = AvatarStatus.Online)

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | src | string | - | Image URL | | alt | string | - | Alt text | | name | string | - | Name for initials fallback | | size | string | 'md' | Avatar size | | shape | string | 'circle' | Shape variant | | status | string | - | Status indicator |

Examples

Avatar Group

<AvatarGroup max={3}>
  <Avatar src="/user1.jpg" name="User 1" />
  <Avatar src="/user2.jpg" name="User 2" />
  <Avatar src="/user3.jpg" name="User 3" />
  <Avatar src="/user4.jpg" name="User 4" />
</AvatarGroup>

With Badge

<Avatar src="/profile.jpg" name="John Doe">
  <Badge variant="success" dot />
</Avatar>