Avatar

An image element with a fallback for representing the user.

Examples

Basic Usage

blade

<x-plume::avatar src="https://github.com/shadcn.png" alt="User" />
<x-plume::avatar fallback="JD" />
<x-plume::avatar>
    <x-plume::icon i="icon-[fluent--person-24-regular]" class="size-6" />
</x-plume::avatar>

Status Indicators

blade

<x-plume::avatar src="https://github.com/shadcn.png" status="online" />
<x-plume::avatar fallback="AW" status="offline" />
<x-plume::avatar fallback="JD" status="bg-amber-500" />

Prop	Type	Default	Description
src	string	null	The URL of the avatar image.
alt	string	''	Accessibility text for the image.
fallback	string	''	Text to display if image fails to load (e.g., 'JD').
size	string	'md'	Size of the avatar: 'xs', 'sm', 'md', 'lg', 'xl'.
status	string	null	Color for the status indicator: 'success', 'warning', 'error', 'info'.
shape	string	'round'	Shape of the avatar: 'round' (circle) or 'default' (rounded-md).

Usage

blade

<x-plume::avatar fallback="JD" />