Avatars

Default 
<x-app-ui::avatar src="https://thispersondoesnotexist.com/image" size="sm" />

<x-app-ui::avatar src="https://thispersondoesnotexist.com/image" />

<x-app-ui::avatar src="https://thispersondoesnotexist.com/image" size="lg" />
With status indicator 
<x-app-ui::avatar src="https://thispersondoesnotexist.com/image" status="gray" />

<x-app-ui::avatar src="https://thispersondoesnotexist.com/image" status="green" />

<x-app-ui::avatar src="https://thispersondoesnotexist.com/image" status="red" />

<x-app-ui::avatar src="https://thispersondoesnotexist.com/image" status="yellow" />
Stacked 
<x-app-ui::avatar-stack>
    <x-app-ui::avatar src="https://thispersondoesnotexist.com/image" stacked />

    <x-app-ui::avatar src="https://thispersondoesnotexist.com/image" stacked />

    <x-app-ui::avatar src="https://thispersondoesnotexist.com/image" stacked />
</x-app-ui::avatar-stack>
Loading 
<x-app-ui::avatar size="sm" />

<x-app-ui::avatar />

<x-app-ui::avatar size="lg" />
Loading with status indicator 
<x-app-ui::avatar status="gray" />

<x-app-ui::avatar status="green" />

<x-app-ui::avatar status="red" />

<x-app-ui::avatar status="yellow" />
Loading stacked 
<x-app-ui::avatar-stack>
    <x-app-ui::avatar stacked />

    <x-app-ui::avatar stacked />

    <x-app-ui::avatar stacked />
</x-app-ui::avatar-stack>

API

app-ui::avatar

Attributes

Name Default Options Notes
alt
size md lg, md, sm
src Image URL
stacked false Boolean expression
status gray, green, red, yellow If defined, a status indicator of this color will appear above the bottom right corner of the avatar.

app-ui::avatar-stack

Slots

Name Notes
Main Contains the app-ui::avatar components in this group.