<x-bt-avatar />
Customize via presets →
Basic Usage
Pass a src URL and optional alt text to render an image avatar.
1<x-bt-avatar src="https://i.pravatar.cc/150?u=avatar-basic" alt="Jane Doe" />Initials
When no image is available, use the initials prop to show text inside a colored circle.
1<x-bt-avatar initials="JD" />2<x-bt-avatar initials="MP" blue />3<x-bt-avatar initials="AE" green />Fallback Priority
The avatar renders in priority order: image, initials, slot content, then default SVG silhouette.
1{{-- Default SVG silhouette --}}2<x-bt-avatar />3 4{{-- Custom slot content --}}5<x-bt-avatar blue>6 <x-bt-icon name="user" class="w-5 h-5" />7</x-bt-avatar>Sizes
Use magic attributes or the size prop: xs, sm, md (default), lg, xl.
1<x-bt-avatar xs initials="XS" />2<x-bt-avatar sm initials="SM" />3<x-bt-avatar md initials="MD" />4<x-bt-avatar lg initials="LG" />5<x-bt-avatar xl initials="XL" />Custom Size
Override the size preset with arbitrary Tailwind classes using customSize.
1<x-bt-avatar customSize="w-20 h-20 text-2xl" initials="XX" purple />Colors
Set the background color using magic attributes or the color prop. Colors apply to initials and slot content.
1<x-bt-avatar red initials="R" />2<x-bt-avatar blue initials="B" />3<x-bt-avatar green initials="G" />4<x-bt-avatar purple initials="P" />5<x-bt-avatar orange initials="O" />All available colors
beartropy, red, orange, amber, yellow,
lime, green, emerald, teal, cyan,
sky, blue, indigo, violet, purple,
fuchsia, pink, rose, gray, slate,
stone, zinc, neutral.
Dynamic Color
Use the color prop when the color comes from a PHP variable.
1@php $avatarColor = 'teal'; @endphp2<x-bt-avatar :color="$avatarColor" initials="DY" />Status Indicator
Use the status slot to add a badge positioned at the bottom-right corner.
1<x-bt-avatar src="https://i.pravatar.cc/150?u=avatar-status-1" alt="Online user" lg> 2 <x-slot:status> 3 <span class="block w-3 h-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-gray-900"></span> 4 </x-slot:status> 5</x-bt-avatar> 6 7<x-bt-avatar initials="JD" lg> 8 <x-slot:status> 9 <span class="block w-3 h-3 rounded-full bg-gray-400 ring-2 ring-white dark:ring-gray-900"></span>10 </x-slot:status>11</x-bt-avatar>Real-World Example
A user profile row combining avatar, name, and status badge.
Sarah Connor
sarah@example.com
1<div class="flex items-center gap-3"> 2 <x-bt-avatar src="https://i.pravatar.cc/150?u=avatar-real" alt="Sarah Connor" lg> 3 <x-slot:status> 4 <span class="block w-3 h-3 rounded-full bg-green-500 ring-2 ring-white dark:ring-gray-900"></span> 5 </x-slot:status> 6 </x-bt-avatar> 7 <div> 8 <p class="font-semibold text-gray-900 dark:text-gray-100">Sarah Connor</p> 9 <p class="text-sm text-gray-500 dark:text-gray-400">sarah@example.com</p>10 </div>11</div>Slots
| Slot | Description |
|---|---|
default
|
Custom content inside the avatar circle. Replaces the default SVG silhouette when no
src or initials are provided.
|
status
|
Status indicator positioned at the bottom-right corner. Ideal for online/offline dots or notification badges.
|
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src
|
string|null
|
null
|
Image source URL. When provided, renders an
<img> tag with object-cover.
|
alt
|
string
|
''
|
Alt text for the image, used for accessibility.
|
initials
|
string|null
|
null
|
Fallback text initials displayed when no image is provided.
|
size
|
string|null
|
null
|
Size preset:
xs, sm, md (default), lg, xl. Also available as magic attributes.
|
customSize
|
string|null
|
null
|
Custom Tailwind size classes (e.g.
w-20 h-20 text-2xl) to override the size preset.
|
color
|
string|null
|
null
|
Color preset for the avatar background, text, and border. Use magic attributes or the
color prop for dynamic values.
|