​
Overview

Hux UI provides avatar components for displaying user profile images:
  • HuxAvatar - Circular user images with initials fallback
  • HuxAvatarGroup - Display multiple avatars with overlapping layouts
HuxAvatar Component

​
Component Variants

​
Basic Avatar

Simple avatar with name and initials: 
HuxAvatar(
  name: 'John Doe',
  size: HuxAvatarSize.medium,
)

​
Avatar with Image

Avatar with custom profile image: 
HuxAvatar(
  name: 'Jane Smith',
  imageUrl: 'https://example.com/profile.jpg',
  size: HuxAvatarSize.large,
)

​
Gradient Avatar

Avatar with beautiful gradient background: 
HuxAvatar(
  useGradient: true,
  gradientVariant: HuxAvatarGradient.bluePurple,
  size: HuxAvatarSize.medium,
)

​
Small Avatar

Compact avatar for tight spaces: 
HuxAvatar(
  name: 'Bob',
  size: HuxAvatarSize.small,
)

​
Large Avatar

Prominent avatar for important displays: 
HuxAvatar(
  name: 'Alice',
  size: HuxAvatarSize.large,
)

​
Extra Large Avatar

Hero avatar for main displays: 
HuxAvatar(
  name: 'CEO',
  size: HuxAvatarSize.extraLarge,
  useGradient: true,
  gradientVariant: HuxAvatarGradient.purplePink,
)

​
Avatar Group

Multiple avatars with overlapping layout: 
HuxAvatarGroup(
  avatars: [
    HuxAvatar(name: 'Alice'),
    HuxAvatar(name: 'Bob'),
    HuxAvatar(useGradient: true, gradientVariant: HuxAvatarGradient.greenBlue),
  ],
  overlap: true,
  maxVisible: 3,
)

​
Spaced Avatar Group

Multiple avatars with spacing between them: 
HuxAvatarGroup(
  avatars: [
    HuxAvatar(name: 'Team A'),
    HuxAvatar(name: 'Team B'),
    HuxAvatar(name: 'Team C'),
  ],
  overlap: false,
  spacing: 8.0,
)

​
HuxAvatar

​
With Gradient

HuxAvatar(
  useGradient: true,
  gradientVariant: HuxAvatarGradient.bluePurple,
  size: HuxAvatarSize.medium,
)

​
Sizes

  • small - Compact avatar
  • medium - Standard avatar (default)
  • large - Prominent avatar
  • extraLarge - Hero avatar

​
Gradient Variants

  • bluePurple - Blue to purple gradient
  • greenBlue - Green to blue gradient
  • orangeRed - Orange to red gradient
  • purplePink - Purple to pink gradient
  • tealCyan - Teal to cyan gradient

​
HuxAvatarGroup

Display multiple avatars with overlapping or spaced layouts. 
HuxAvatarGroup(
  avatars: [
    HuxAvatar(name: 'Alice'),
    HuxAvatar(name: 'Bob'),
    HuxAvatar(useGradient: true, gradientVariant: HuxAvatarGradient.greenBlue),
  ],
  overlap: true,
  maxVisible: 3,
)
Complete avatar documentation is coming soon. See the example app for more usage patterns.