Avatar

Avatar component.

Avatar, Personalization Blocks

Example:

// AppServiceProvider, "boot" method.
 
TallStackUi::customize()
    ->avatar()
    ->block('block', 'classes');

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v3.

# Basic Usage

<x-avatar text="TS" />

# Color Variations

<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="black" />

# Size Variations

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

# Square Variations

<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="black" />

# Borderless

An option to remove the default border.

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

Modelable

# 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

# 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" />