New version 1.30.0 is now available 🎉 Introducing a useful command to search for component usage.

Powerful suite of Blade components for TALL Stack apps.

Avatar

Avatar component.

TS
<x-avatar text="TS" />
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
TS
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="black" />
<x-avatar text="TS" color="white" />
XS
SM
MD
LG
<x-avatar text="XS" xs />
<x-avatar text="SM" sm />
<x-avatar text="MD" md />
<x-avatar text="LG" lg />
TS
<x-avatar text="TS" square />

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" />
<x-avatar color="white" />
Modelable

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

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

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

taylor@laravel.com
<x-avatar :model="auth()->user()" property="email" color="fff" />

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

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

Interact with all other UI Avatar configuration options.

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

Code highlighting provided by Torchlight