TallStackUI, Avatar

# Basic Usage

TS

<x-avatar text="TS" />

# Color Variations

TS

<x-avatar text="TS" />
<x-avatar text="TS" color="secondary" />
<x-avatar text="TS" color="slate" />
<x-avatar text="TS" color="gray" />
<x-avatar text="TS" color="zinc" />
<x-avatar text="TS" color="neutral" />
<x-avatar text="TS" color="stone" />
<x-avatar text="TS" color="red" />
<x-avatar text="TS" color="orange" />
<x-avatar text="TS" color="amber" />
<x-avatar text="TS" color="yellow" />
<x-avatar text="TS" color="lime" />
<x-avatar text="TS" color="green" />
<x-avatar text="TS" color="emerald" />
<x-avatar text="TS" color="teal" />
<x-avatar text="TS" color="cyan" />
<x-avatar text="TS" color="sky" />
<x-avatar text="TS" color="blue" />
<x-avatar text="TS" color="indigo" />
<x-avatar text="TS" color="violet" />
<x-avatar text="TS" color="purple" />
<x-avatar text="TS" color="fuchsia" />
<x-avatar text="TS" color="pink" />
<x-avatar text="TS" color="rose" />
<x-avatar text="TS" color="mauve" />
<x-avatar text="TS" color="olive" />
<x-avatar text="TS" color="mist" />
<x-avatar text="TS" color="taupe" />
<x-avatar text="TS" color="black" />

# Size Variations

XS

SM

MD

LG

<x-avatar text="XS" xs />
<x-avatar text="SM" sm />
<x-avatar text="MD" md />
<x-avatar text="LG" lg />

# Square Variations

TS

<x-avatar text="TS" square />

# Placeholder

An option generate avatar with a svg placeholder.

<x-avatar />
<x-avatar color="secondary" />
<x-avatar color="slate" />
<x-avatar color="gray" />
<x-avatar color="zinc" />
<x-avatar color="neutral" />
<x-avatar color="stone" />
<x-avatar color="red" />
<x-avatar color="orange" />
<x-avatar color="amber" />
<x-avatar color="yellow" />
<x-avatar color="lime" />
<x-avatar color="green" />
<x-avatar color="emerald" />
<x-avatar color="teal" />
<x-avatar color="cyan" />
<x-avatar color="sky" />
<x-avatar color="blue" />
<x-avatar color="indigo" />
<x-avatar color="violet" />
<x-avatar color="purple" />
<x-avatar color="fuchsia" />
<x-avatar color="pink" />
<x-avatar color="rose" />
<x-avatar color="mauve" />
<x-avatar color="olive" />
<x-avatar color="mist" />
<x-avatar color="taupe" />
<x-avatar color="black" />

# Borderless

An option to remove the default border.

<x-avatar color="primary" borderless />

# Modelable

An option to generate a UI Avatar from a model based on name property.

<x-avatar :model="auth()->user()" color="fff" />

# Custom Property

Generate a UI Avatar from a model based on a property different from name.

<x-avatar :model="auth()->user()" property="email" color="fff" />

# Customizing Colors

Generate a UI Avatar from a model based customizing the colors.

<!-- "background" and "color" must be hexadecimals -->
 
<x-avatar :model="auth()->user()"
          property="email"
          background="ff0000"
          color="fff" />

# Other Options

Interact with all other UI Avatar configuration options.

<x-avatar :model="auth()->user()"
          property="email"
          background="ff0000"
          color="fff"
          :options="['uppercase' => false, 'rounded' => true]"
/>

# Image

An option to use an image as avatar.

<x-avatar image="https://i.pravatar.cc/300" xs />
<x-avatar image="https://i.pravatar.cc/300" sm />
<x-avatar image="https://i.pravatar.cc/300" md />
<x-avatar image="https://i.pravatar.cc/300" lg />

You can also set the image via x-bind:src from AlpineJS:

<div x-data="{ image: 'https://i.pravatar.cc/300' }">
    <x-avatar image x-bind:src="image" />
</div>

# Default Alt Text

<x-avatar image="https://i.pravatar.cc/300" text="alt-text-goes-here" />

# Group

<x-avatar.group>
    <x-avatar image="https://i.pravatar.cc/300" borderless />
    <x-avatar image="https://i.pravatar.cc/200" borderless />
    <x-avatar image="https://i.pravatar.cc/100" borderless />
</x-avatar.group>

# Group Reverse

An option to invert the avatar overlap layering.

A

B

C

D

E

<!-- The first avatar in markup ends on the right; the overlap progresses right-to-left. -->
<!-- DOM order is preserved, only the painted overlap is mirrored. -->
 
<x-avatar.group reverse>
    <x-avatar text="A" color="indigo" />
    <x-avatar text="B" color="emerald" />
    <x-avatar text="C" color="amber" />
    <x-avatar text="D" color="pink" />
    <x-avatar text="E" color="sky" />
</x-avatar.group>

# Presence

An option to indicate the presence status of the avatar.

<x-avatar image="https://i.pravatar.cc/300" presence />
 
<!-- with a pulse indicator -->
 
<x-avatar image="https://i.pravatar.cc/300" presence pulse />

# Presence Color

<x-avatar image="https://i.pravatar.cc/300" presence presence-color="green" />
<x-avatar image="https://i.pravatar.cc/300" presence presence-color="red" />

# Presence Positions

<x-avatar image="https://i.pravatar.cc/300" presence presence-position="right-top" />
<x-avatar image="https://i.pravatar.cc/300" presence presence-position="right-bottom" />
<x-avatar image="https://i.pravatar.cc/300" presence presence-position="left-top" />
<x-avatar image="https://i.pravatar.cc/300" presence presence-position="left-bottom" />

Avatar

Avatar, Customization Blocks

WARNING!