Overview
JAvatar displays user identity with support for:- Auto-generated initials from name
- Profile images
- Multiple sizes (XS to XL)
- Color variants
- Status badges (online, away, busy, offline)
- Avatar groups with overlap effect
Constructors
Creates an avatar with placeholder ”?” initials.
Creates an avatar with explicit initials.
Creates an avatar with auto-generated initials from first and last name.
Basic Usage
Image
Sets a profile image. When set, the image covers the initials.Returns the avatar instance for method chaining.
Initials
Sets custom initials.Returns the avatar instance for method chaining.
Sets initials auto-generated from first and last name.Returns the avatar instance for method chaining.
Size
Sets the avatar size.Returns the avatar instance for method chaining.
Returns the current size.
Returns the size property for binding.
Size Enum
Available avatar sizes:
XS- 24px diameter, 10px font, 8px badgeSM- 32px diameter, 12px font, 10px badgeMD- 40px diameter, 14px font, 12px badge (default)LG- 48px diameter, 16px font, 14px badgeXL- 64px diameter, 20px font, 16px badge
Color
Sets the avatar background and text color variant.Returns the avatar instance for method chaining.
Status Badge
Sets the status indicator badge shown at bottom-right.Returns the avatar instance for method chaining.
Returns the current status.
Returns the status property for binding.
Status Enum
Available status indicators:
NONE- No badge visibleONLINE- Green badge (#22c55e)AWAY- Yellow/orange badge (#f59e0b)BUSY- Red badge (#ef4444)OFFLINE- Gray badge (#94a3b8)
Avatar Group
TheJAvatar.Group class displays multiple avatars with an overlapping effect.
Constructor
Creates an avatar group with the specified avatars.
Methods
Adds an avatar to the group with overlap styling.
Sets the maximum number of visible avatars. Extra avatars are hidden and shown as “+N” overflow indicator.Returns the group instance for method chaining.
Example: Avatar Group
Color Variants
Available color schemes with background and text color pairs:
primary- Indigo (#e0e7ff / #4f46e5)success- Green (#dcfce7 / #16a34a)danger- Red (#fee2e2 / #dc2626)warning- Amber (#fef3c7 / #d97706)info- Blue (#dbeafe / #2563eb)slate- Gray (#f1f5f9 / #475569)