Avatar
User profile images with automatic fallbacks and badges
Basic Usage
The most basic avatar with default icon:
<neura::avatar />
<neura::avatar icon="user" />
<neura::avatar icon="user-circle" />Sizes
Avatars are available in 5 sizes:
<neura::avatar size="xs" />
<neura::avatar size="sm" />
<neura::avatar size="md" />
<neura::avatar size="lg" />
<neura::avatar size="xl" />With Initials
Automatically generate initials from a name:
JD
SS
MJ
EW
AB
<neura::avatar name="John Doe" />
<neura::avatar name="Sarah Smith" />
<neura::avatar name="Mike Johnson" />Manual Initials
AB
CD
EF
<neura::avatar initials="AB" />
<neura::avatar initials="CD" />With Images
Use the src attribute to display an image:
<neura::avatar src="/path/to/image.jpg" alt="User Name" />Colors
All available colors for avatars with initials:
Us
Us
Us
Us
Us
Us
Us
Us
Us
Us
Us
Us
Us
Us
Us
Us
Us
<neura::avatar name="User" color="red" />
<neura::avatar name="User" color="blue" />
<neura::avatar name="User" color="green" />Auto Color
Automatically generate a color based on the name:
Al
Bo
Ch
Da
Em
<neura::avatar name="Alice" color="auto" />Color Auto
With color="auto", the color is automatically generated via a hash of the name.
Each name will always have the same color.
Circle Shape
Make avatars perfectly circular:
JD
SS
<neura::avatar name="John Doe" circle />
<neura::avatar src="/image.jpg" circle />With Badges
Add badges to indicate status. Badges are now always small, fully rounded, and use unified color logic
matching the badge component.
Badge Improvements
Avatar badges now use the same color and size logic as the badge component, are always small and
fully rounded, and support all color variants. Type and parse errors are now handled
automatically.
Status Badges
On
Online
Bu
Busy
Aw
Away
Of
Offline
<neura::avatar name="User" badge="" badge:color="green" />
<neura::avatar name="User" badge="" badge:color="red" />
<neura::avatar name="User" badge="" badge:color="yellow" />Count Badges
Us
Us
Us
<neura::avatar name="User" badge="3" badge:color="red" />
<neura::avatar name="User" badge="99+" badge:color="orange" />Badge Positions
Tl
Top Left
Tr
Top Right
Bl
Bottom Left
Br
Bottom Right
<neura::avatar badge:position="top left" />
<neura::avatar badge:position="top right" />
<neura::avatar badge:position="bottom left" />
<neura::avatar badge:position="bottom right" />With Icons
Use custom icons instead of photos:
<neura::avatar icon="user" color="blue" />
<neura::avatar icon="users" color="purple" />
<neura::avatar icon="building-office" color="green" />Clickable Avatars
Make avatars clickable with the href attribute:
<neura::avatar
name="John Doe"
href="/profile"
class="hover:ring-2 hover:ring-blue-500"
/>Usage Examples
Usage examples in different contexts:
User Profile Card
JD
John Doe
Product Designer · Online
Team List
AJ
Alice Johnson
Admin
BS
Bob Smith
Developer
CB
Charlie Brown
Designer
Comment Section
EW
Emma Wilson
2h ago
Great article! This helped me a lot with my project.
MD
Mike Davis
5h ago
Looking forward to more tutorials like this!
Avatar Groups
Display multiple avatars in a group:
U1
U2
U3
U4
Al
Bo
Ch
+5
<div class="flex -space-x-2">
<neura::avatar name="User 1" class="ring-2 ring-white" />
<neura::avatar name="User 2" class="ring-2 ring-white" />
<neura::avatar name="User 3" class="ring-2 ring-white" />
</div>Best Practices
Always provide alt text
For accessibility, use alt or name to describe the avatar
Use color="auto" for consistency
Each user will always have the same avatar color
Choose the right size based on context
xs/sm for lists, md for profiles, lg/xl for headers
Use badges for status
Green = online, red = busy, yellow = away, gray = offline
Add rings for groups
Use ring-2 ring-white to separate overlapping avatars
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| size | string | md | Avatar size (xs, sm, md, lg, xl) |
| src | string | null | Image URL |
| name | string | null | Name for auto-generating initials |
| initials | string | null | Custom initials text |
| icon | string | user | Icon name for fallback |
| color | string | null | Background color (auto, red, blue, etc.) |
| circle | boolean | false | Make avatar circular |
| badge | string/slot | null | Badge content or empty string for dot |
| badge:color | string | white | Badge color |
| badge:position | string | bottom right | Badge position (top/bottom left/right) |
| href | string | null | Make avatar clickable |