Avatar

Display user profile images or placeholders with consistent styling and sizing. Avatars are perfect for user lists, comments, profiles, and any interface requiring user identification.

The avatar component supports 9 different variants, each with its own color scheme for borders and backgrounds:

Default

Dark

Light

Brand

Primary

Secondary

Success

Warning

Danger

DEF

Default

DARK

Dark

LGT

Light

Brand

Primary

SEC

Secondary

SUC

Success

WRN

Warning

DGR

Danger

<x-andach-avatar img="/img/avatars/1.png" alt="User 1" />
<x-andach-avatar img="/img/avatars/2.png" alt="User 2" variant="primary" />
<x-andach-avatar img="/img/avatars/3.png" alt="User 3" variant="success" />

Customisation

Attribute Name	Type	Default Value	Description
alt	string	null	Alternative text for the avatar image (important for accessibility).
img	string	null	URL or path to the avatar image file.
label	string	null	Text label to display instead of an image (useful for initials or single characters).

Size Variations

Control the size of avatars for different contexts:

<x-andach-avatar img="/img/avatars/1.jpg" alt="Extra Small" size="xs" />
<x-andach-avatar img="/img/avatars/2.jpg" alt="Small" size="sm" />
<x-andach-avatar img="/img/avatars/3.jpg" alt="Base" size="base" />
<x-andach-avatar img="/img/avatars/1.jpg" alt="Large" size="lg" />
<x-andach-avatar img="/img/avatars/2.jpg" alt="Extra Large" size="xl" />

Styling Attributes

Enhance avatars with various visual effects:

<x-andach-avatar img="/img/avatars/2.jpg" alt="Hollow Style" variant="danger" :accent="true" />
<x-andach-avatar img="/img/avatars/1.jpg" alt="With Border" variant="primary" :border="false" />
<x-andach-avatar img="/img/avatars/2.jpg" alt="With Ring" variant="success" :ring="true" />
<x-andach-avatar img="/img/avatars/1.jpg" alt="Square Avatar" variant="brand" :rounded="false" />
<x-andach-avatar img="/img/avatars/3.jpg" alt="With Shadow" variant="warning" :shadow="true" />

Text Label Avatars

Use text labels for initials or single characters when images aren't available:

<x-andach-avatar label="JD" alt="John Doe" variant="primary" />
<x-andach-avatar label="AS" alt="Alice Smith" variant="success" />
<x-andach-avatar label="BW" alt="Bob Wilson" variant="warning" />
<x-andach-avatar label="CD" alt="Carol Davis" variant="danger" />
<x-andach-avatar label="EJ" alt="Emma Johnson" variant="brand" />

Placeholder Avatars

When neither image nor label is provided, avatars display with background colors:

<x-andach-avatar alt="No Image Default" />
<x-andach-avatar alt="No Image Primary" variant="primary" />
<x-andach-avatar alt="No Image Success" variant="success" />
<x-andach-avatar alt="No Image Warning" variant="warning" />
<x-andach-avatar alt="No Image Danger" variant="danger" />

Avatar Groups

Display multiple avatars together for teams or user lists:

<div class="flex -space-x-2 mb-4">
    <x-andach-avatar img="/img/avatars/1.jpg" alt="Team Member 1" variant="primary" :border="true" />
    <x-andach-avatar img="/img/avatars/2.jpg" alt="Team Member 2" variant="primary" :border="true" />
    <x-andach-avatar img="/img/avatars/3.jpg" alt="Team Member 3" variant="primary" :border="true" />
    <x-andach-avatar img="/img/avatars/1.jpg" alt="Team Member 4" variant="primary" :border="true" />
</div>

<div class="flex -space-x-4 mb-4">
    <x-andach-avatar img="/img/avatars/2.jpg" alt="Large Team 1" size="lg" variant="success" :ring="true" />
    <x-andach-avatar img="/img/avatars/3.jpg" alt="Large Team 2" size="lg" variant="success" :ring="true" />
    <x-andach-avatar img="/img/avatars/1.jpg" alt="Large Team 3" size="lg" variant="success" :ring="true" />
</div>

Real-World Usage

Common scenarios where avatars enhance user interfaces:

John Doe
Administrator

Jane Smith
Online now

Bob Wilson
Last seen 2 hours ago

<div class="flex items-center space-x-3">
    <x-andach-avatar img="/img/avatars/1.jpg" alt="John Doe" size="sm" variant="primary" />
    <div>John Doe<br />Administrator</div>
</div>

<div class="flex items-center space-x-3">
    <x-andach-avatar img="/img/avatars/2.jpg" alt="Jane Smith" size="sm" variant="success" />
    <div>Jane Smith<br />Online now</div>
</div>

<div class="flex items-center space-x-3">
    <x-andach-avatar img="/img/avatars/3.jpg" alt="Bob Wilson" size="sm" variant="secondary" />
    <div>Bob Wilson<br />Last seen 2 hours ago</div>
</div>