Laravel Avatar Component
Free · MITVisual representation of a user or entity with image, initials, or icon fallback.
A Avatar built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag:
<x-aura::avatar>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::avatar src="/images/avatars/alice.jpg" alt="Jane Doe" />See the full API, props and live examples in the Avatar documentation.
Overview
The Avatar component displays a user's profile image, auto-generated initials, or a fallback icon. It supports multiple sizes, rounded styles, a status indicator (online, offline, busy), and automatic color assignment based on the user's name.
Use avatars for:
- User profile pictures
- Comment/message author indicators
- Team member lists
- Navigation bars and sidebars
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src |
string|null |
null |
Image URL. When set, renders an <img> tag |
name |
string|null |
null |
Full name for auto-generating initials and color |
initials |
string|null |
null |
Explicit initials (overrides auto-generation from name) |
alt |
string |
'' |
Alt text for the image |
size |
string |
'md' |
Size: xs, sm, md, lg, xl |
color |
string|null |
null |
Background color for initials avatar. Auto-assigned from name when null |
status |
string|null |
null |
Status indicator: online, offline, busy |
rounded |
string |
'full' |
Border radius: full (circle), lg, md, sm, none |
Available auto-colors: primary, success, warning, danger, info, purple, pink, teal, orange, indigo.
Slots
The Avatar component does not use named slots. All content is driven by props.
See more examples and every variant in the Avatar documentation.