Avatar

v1.1.0

bash

npm install @hua-labs/hua

tsx

import { Avatar } from "@hua-labs/hua";

tsx

// With image
<Avatar src="/user.jpg" alt="John Doe" />

// Fallback with initial from alt
<Avatar alt="Jane Smith" />

// Custom fallback content
<Avatar>JD</Avatar>

tsx

<Avatar size="sm">S</Avatar>  // 32px
<Avatar size="md">M</Avatar>  // 40px
<Avatar size="lg">L</Avatar>  // 48px

tsx

<Avatar variant="default">D</Avatar>
<Avatar variant="glass">G</Avatar>  // With ring and blur effect

tsx

<div className="flex -space-x-3">
  <Avatar className="ring-1 ring-background" src="/user1.jpg" />
  <Avatar className="ring-1 ring-background" src="/user2.jpg" />
  <Avatar className="ring-1 ring-background" src="/user3.jpg" />
  <Avatar className="ring-1 ring-background bg-secondary">+3</Avatar>
</div>


`size`	`"sm" \| "md" \| "lg"`	`"md"`	Avatar size (sm: 32px, md: 40px, lg: 48px)
`variant`	`"default" \| "glass"`	`"default"`	Avatar style variant
`src`	`string`	-	Image URL
`alt`	`string`	-	Image alt text, also used for fallback initial
`children`	`React.ReactNode`	-	Custom fallback content
`fallbackText`	`string`	-	Text to display as fallback when image fails to load. Fallback chain: fallbackText > children > alt.charAt(0) > 'U'

•Alt Text: Always provide alt for images to describe the user
•Fallback Initials: Initials are derived from alt text when image is unavailable

Badge Alert