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:
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 |