Avatar

Display user avatars with images, initials, or icons. Supports automatic color generation, status badges, groups, and multiple sizes and shapes.

Image avatar

<x-boson::avatar src="/img/alice.jpg" name="Alice" size="xs" />
<x-boson::avatar src="/img/alice.jpg" name="Alice" size="sm" />
<x-boson::avatar src="/img/alice.jpg" name="Alice" />
<x-boson::avatar src="/img/alice.jpg" name="Alice" size="lg" />
<x-boson::avatar src="/img/alice.jpg" name="Alice" size="xl" />

Initials

<x-boson::avatar name="John Doe" />
<x-boson::avatar name="Alice" />
<x-boson::avatar name="Bob Smith" />

Auto color

<x-boson::avatar name="John Doe" color="auto" />
<x-boson::avatar name="Alice" color="auto" />
<x-boson::avatar name="Bob Smith" color="auto" />
<x-boson::avatar name="Charlie" color="auto" />
<x-boson::avatar name="Diana Prince" color="auto" />
<x-boson::avatar name="Eve" color="auto" />

Colors

<x-boson::avatar name="Re" color="red" />
<x-boson::avatar name="Bl" color="blue" />
<x-boson::avatar name="Gr" color="green" />
<x-boson::avatar name="Pu" color="purple" />
<x-boson::avatar name="Pi" color="pink" />

Icon avatar

<x-boson::avatar icon="user" />
<x-boson::avatar icon="academic-cap" color="blue" />
<x-boson::avatar icon="star" color="amber" />

Default (no props)

<x-boson::avatar />

Sizes

<x-boson::avatar name="John Doe" color="auto" size="xs" />
<x-boson::avatar name="John Doe" color="auto" size="sm" />
<x-boson::avatar name="John Doe" color="auto" />
<x-boson::avatar name="John Doe" color="auto" size="lg" />
<x-boson::avatar name="John Doe" color="auto" size="xl" />

Shapes

<x-boson::avatar name="John Doe" color="auto" shape="rounded" />
<x-boson::avatar name="John Doe" color="auto" shape="circle" />

With badge

3

DI

EV 99+

{{-- Status dot --}}
<x-boson::avatar src="/img/bob.jpg" name="Bob" badge:circle />

{{-- Notification count --}}
<x-boson::avatar src="/img/charlie.jpg" name="Charlie" badge:content="3" badge:color="red" />

{{-- Online status on initials --}}
<x-boson::avatar name="Diana" color="auto" badge:circle badge:color="green" />

{{-- Large with count --}}
<x-boson::avatar name="Eve" color="auto" size="lg" badge:content="99+" badge:color="red" />

Avatar group

DI

EV

<x-boson::avatar.group>
    <x-boson::avatar src="/img/alice.jpg" name="Alice" />
    <x-boson::avatar src="/img/bob.jpg" name="Bob" />
    <x-boson::avatar src="/img/charlie.jpg" name="Charlie" />
    <x-boson::avatar name="Diana" color="auto" />
    <x-boson::avatar name="Eve" color="auto" />
</x-boson::avatar.group>

As link

BS

<x-boson::avatar as="a" href="/users/alice" src="/img/alice.jpg" name="Alice" />
<x-boson::avatar as="a" href="/users/bob" name="Bob Smith" color="auto" />

In a table

User	Role	Status
Alice Johnson	Admin	Active
BS Bob Smith	Editor	Pending
Guest User	Viewer	Inactive

<x-boson::table hoverable>
    <x-boson::table.head>
        <x-boson::table.row>
            <x-boson::table.header>User</x-boson::table.header>
            <x-boson::table.header>Role</x-boson::table.header>
            <x-boson::table.header>Status</x-boson::table.header>
        </x-boson::table.row>
    </x-boson::table.head>
    <x-boson::table.body>
        <x-boson::table.row>
            <x-boson::table.data>
                <div class="flex items-center gap-3">
                    <x-boson::avatar src="/img/alice.jpg" name="Alice" size="sm" />
                    Alice Johnson
                </div>
            </x-boson::table.data>
            <x-boson::table.data>
                <x-boson::badge color="purple" size="sm">Admin</x-boson::badge>
            </x-boson::table.data>
            <x-boson::table.data>
                <x-boson::badge color="green" size="sm" icon="check">Active</x-boson::badge>
            </x-boson::table.data>
        </x-boson::table.row>
    </x-boson::table.body>
</x-boson::table>

Props