Avatar

<x-avatar />
<x-avatar text="tall craftui" />
<x-avatar :image="$this->imageUrl" />
<x-avatar :image="$this->imageUrl" badge />
<x-avatar :image="$this->imageUrl" ring />
<x-avatar :image="$this->imageUrl" ring badge />
<x-avatar :image="$this->imageUrl" rounded ring badge badge-position="bottom" />

<x-avatar />
<x-avatar badge />
<x-avatar ring />
<x-avatar ring badge />
<x-avatar ring badge badge-position="bottom" />

<x-avatar text="tallcraftui" />
<x-avatar text="tallcraftui" badge />
<x-avatar text="tallcraftui" ring />
<x-avatar text="tallcraftui" ring badge />
<x-avatar text="tallcraftui" ring badge badge-position="bottom"/>

<x-avatar :image="$this->imageUrl" alt="Avatar" sm />
<x-avatar :image="$this->imageUrl" alt="Avatar" md />
<x-avatar :image="$this->imageUrl" alt="Avatar" lg />
<x-avatar :image="$this->imageUrl" alt="Avatar" xl />

<x-avatars stacked>
    <x-avatar />
    <x-avatar />
    <x-avatar />
    <x-avatar />
    <x-avatar />
</x-avatars>
 
<x-avatars stacked>
    <x-avatar text="tallcraftui" ring />
    <x-avatar text="tallcraftui" ring />
    <x-avatar text="tallcraftui" ring />
    <x-avatar text="tallcraftui" ring />
    <x-avatar text="tallcraftui" ring />
</x-avatars>
 
<x-avatars stacked plus="99" ring>
    <x-avatar :image="$this->imageUrl" ring />
    <x-avatar :image="$this->imageUrl" ring />
    <x-avatar :image="$this->imageUrl" ring />
    <x-avatar :image="$this->imageUrl" ring />
    <x-avatar :image="$this->imageUrl" ring />
</x-avatars>

<x-avatar :image="$this->imageUrl" ring />
<x-avatar :image="$this->imageUrl" ring ring-color="black" />
<x-avatar :image="$this->imageUrl" ring ring-color="white" />
<x-avatar :image="$this->imageUrl" ring ring-color="slate" />
<x-avatar :image="$this->imageUrl" ring ring-color="gray" />
<x-avatar :image="$this->imageUrl" ring ring-color="zinc" />
<x-avatar :image="$this->imageUrl" ring ring-color="neutral" />
<x-avatar :image="$this->imageUrl" ring ring-color="stone" />
<x-avatar :image="$this->imageUrl" ring ring-color="red" />
<x-avatar :image="$this->imageUrl" ring ring-color="orange" />
<x-avatar :image="$this->imageUrl" ring ring-color="amber" />
<x-avatar :image="$this->imageUrl" ring ring-color="yellow" />
<x-avatar :image="$this->imageUrl" ring ring-color="lime" />
<x-avatar :image="$this->imageUrl" ring ring-color="green" />
<x-avatar :image="$this->imageUrl" ring ring-color="cyan" />
<x-avatar :image="$this->imageUrl" ring ring-color="sky" />
<x-avatar :image="$this->imageUrl" ring ring-color="purple" />
<x-avatar :image="$this->imageUrl" ring ring-color="fuchsia" />
<x-avatar :image="$this->imageUrl" ring ring-color="pink" />
<x-avatar :image="$this->imageUrl" ring ring-color="rose" />

<x-avatar :image="$this->imageUrl" badge />
<x-avatar :image="$this->imageUrl" badge badge-color="black" />
<x-avatar :image="$this->imageUrl" badge badge-color="white" />
<x-avatar :image="$this->imageUrl" badge badge-color="slate" />
<x-avatar :image="$this->imageUrl" badge badge-color="gray" />
<x-avatar :image="$this->imageUrl" badge badge-color="zinc" />
<x-avatar :image="$this->imageUrl" badge badge-color="neutral" />
<x-avatar :image="$this->imageUrl" badge badge-color="stone" />
<x-avatar :image="$this->imageUrl" badge badge-color="red" />
<x-avatar :image="$this->imageUrl" badge badge-color="orange" />
<x-avatar :image="$this->imageUrl" badge badge-color="amber" />
<x-avatar :image="$this->imageUrl" badge badge-color="yellow" />
<x-avatar :image="$this->imageUrl" badge badge-color="lime" />
<x-avatar :image="$this->imageUrl" badge badge-color="green" />
<x-avatar :image="$this->imageUrl" badge badge-color="cyan" />
<x-avatar :image="$this->imageUrl" badge badge-color="sky" />
<x-avatar :image="$this->imageUrl" badge badge-color="purple" />
<x-avatar :image="$this->imageUrl" badge badge-color="fuchsia" />
<x-avatar :image="$this->imageUrl" badge badge-color="pink" />
<x-avatar :image="$this->imageUrl" badge badge-color="rose" />

<x-avatar :image="$this->imageUrl" ring badge />
<x-avatar :image="$this->imageUrl" ring ring-color="black" badge badge-color="black" />
<x-avatar :image="$this->imageUrl" ring ring-color="white" badge badge-color="white" />
<x-avatar :image="$this->imageUrl" ring ring-color="slate" badge badge-color="slate" />
<x-avatar :image="$this->imageUrl" ring ring-color="gray" badge badge-color="gray" />
<x-avatar :image="$this->imageUrl" ring ring-color="zinc" badge badge-color="zinc" />
<x-avatar :image="$this->imageUrl" ring ring-color="neutral" badge badge-color="neutral" />
<x-avatar :image="$this->imageUrl" ring ring-color="stone" badge badge-color="stone" />
<x-avatar :image="$this->imageUrl" ring ring-color="red" badge badge-color="red" />
<x-avatar :image="$this->imageUrl" ring ring-color="orange" badge badge-color="orange" />
<x-avatar :image="$this->imageUrl" ring ring-color="amber" badge badge-color="amber" />
<x-avatar :image="$this->imageUrl" ring ring-color="yellow" badge badge-color="yellow" />
<x-avatar :image="$this->imageUrl" ring ring-color="lime" badge badge-color="lime" />
<x-avatar :image="$this->imageUrl" ring ring-color="green" badge badge-color="green" />
<x-avatar :image="$this->imageUrl" ring ring-color="cyan" badge badge-color="cyan" />
<x-avatar :image="$this->imageUrl" ring ring-color="sky" badge badge-color="sky" />
<x-avatar :image="$this->imageUrl" ring ring-color="purple" badge badge-color="purple" />
<x-avatar :image="$this->imageUrl" ring ring-color="fuchsia" badge badge-color="fuchsia" />
<x-avatar :image="$this->imageUrl" ring ring-color="pink" badge badge-color="pink" />
<x-avatar :image="$this->imageUrl" ring ring-color="rose" badge badge-color="rose" />

<x-avatar :image="$this->imageUrl" rounded-none />
<x-avatar :image="$this->imageUrl" rounded-sm />
<x-avatar :image="$this->imageUrl" rounded />
<x-avatar :image="$this->imageUrl" rounded-md />
<x-avatar :image="$this->imageUrl" rounded-lg />
<x-avatar :image="$this->imageUrl" rounded-xl />
<x-avatar :image="$this->imageUrl" rounded-2xl />
<x-avatar :image="$this->imageUrl" rounded-3xl />
<x-avatar :image="$this->imageUrl" rounded-full />