Menu
Table of Contents

Livewire UI Components - v1.0-beta2

Avatar Component

The Avatar component displays a user's profile picture with optional title and subtitle text.

Basic Usage

<x-artisanpack-avatar image="/path/to/image.jpg" alt="User Name" />

With Placeholder

<x-artisanpack-avatar placeholder="JD" alt="John Doe" />

Color System

Predefined Variants

Use predefined color variants for avatar backgrounds:

<x-artisanpack-avatar placeholder="JD" alt="John Doe" color="primary" />
<x-artisanpack-avatar placeholder="SM" alt="Sarah Miller" color="secondary" />
<x-artisanpack-avatar placeholder="AB" alt="Alex Brown" color="accent" />
<x-artisanpack-avatar placeholder="LJ" alt="Lisa Johnson" color="info" />
<x-artisanpack-avatar placeholder="MW" alt="Mike Wilson" color="success" />
<x-artisanpack-avatar placeholder="ER" alt="Emily Rodriguez" color="warning" />
<x-artisanpack-avatar placeholder="CT" alt="Chris Taylor" color="error" />

Tailwind Color Palette

Use any Tailwind color with intensity levels:

<x-artisanpack-avatar placeholder="JD" alt="John Doe" color="blue-500" />
<x-artisanpack-avatar placeholder="SM" alt="Sarah Miller" color="purple-600" />
<x-artisanpack-avatar placeholder="AB" alt="Alex Brown" color="green-400" />
<x-artisanpack-avatar placeholder="LJ" alt="Lisa Johnson" color="red-500" />
<x-artisanpack-avatar placeholder="MW" alt="Mike Wilson" color="yellow-300" />

Custom Hex Colors

Use custom hex color codes:

<x-artisanpack-avatar placeholder="JD" alt="John Doe" color="#ff6b6b" />
<x-artisanpack-avatar placeholder="SM" alt="Sarah Miller" color="#4ecdc4" />
<x-artisanpack-avatar placeholder="AB" alt="Alex Brown" color="#ffe66d" />

Color Adjustments

Fine-tune the background appearance:

<!-- Lighter background -->
<x-artisanpack-avatar placeholder="JD" alt="John Doe" color="blue-500" color-adjustment="lighter" />

<!-- Darker background -->
<x-artisanpack-avatar placeholder="SM" alt="Sarah Miller" color="blue-500" color-adjustment="darker" />

<!-- Subtle background -->
<x-artisanpack-avatar placeholder="AB" alt="Alex Brown" color="blue-500" color-adjustment="subtle" />

With Title and Subtitle

<x-artisanpack-avatar 
    image="/path/to/image.jpg" 
    alt="John Doe"
    title="John Doe"
    subtitle="Software Engineer"
/>

With Slot Content

<x-artisanpack-avatar image="/path/to/image.jpg" alt="John Doe">
    <x-slot:title>
        <div class="flex items-center gap-2">
            <span>John Doe</span>
            <x-artisanpack-badge value="Pro" class="badge-primary badge-sm" />
        </div>
    </x-slot:title>
    
    <x-slot:subtitle>
        <div class="flex items-center gap-2">
            <x-artisanpack-icon name="o-envelope" class="w-3 h-3" />
            <span>john.doe@example.com</span>
        </div>
    </x-slot:subtitle>
</x-artisanpack-avatar>

Custom Size

<x-artisanpack-avatar 
    image="/path/to/image.jpg" 
    alt="John Doe"
    class="w-12 rounded-full"
/>

Props

Name Type Default Description
id string null Optional identifier for the avatar
image string '' URL of the avatar image
alt string '' Alternative text for the avatar image
placeholder string '' Text to display when no image is provided
title string null Title text displayed beside the avatar
subtitle string null Subtitle text displayed beside the avatar
color string null Color variant, Tailwind color (e.g., 'red-500'), or hex code (e.g., '#ff0000')
color-adjustment string null Background adjustment: 'lighter', 'darker', 'transparent', or 'subtle'

Slots

Name Description
title Custom content for the title area
subtitle Custom content for the subtitle area

CSS Classes

The component accepts all standard HTML attributes, including CSS classes. By default, the avatar image is displayed with a size of w-7 and a rounded-full shape. You can override these by passing your own classes to the component.