Components
avatar

Avatar

Visual representation of a user with fallback support for initials.

Demo

<div class="flex flex-wrap items-center gap-2">
    <x-ui.avatar src="/defaultavatar.webp" size="xs" width="640" height="427" alt="avatar xs" class="rounded-full"/>
    <x-ui.avatar src="/defaultavatar.webp" size="sm" width="640" height="427" alt="avatar sm" class="rounded-full"/>
    <x-ui.avatar src="/defaultavatar.webp" size="md" width="640" height="427" alt="avatar md" class="rounded-full"/>
    <x-ui.avatar src="/defaultavatar.webp" size="lg" width="640" height="427" alt="avatar lg" class="rounded-full"/>
    <x-ui.avatar src="/defaultavatar.webp" size="xl" width="640" height="427" alt="avatar xl" class="rounded-full"/>
</div>

Installation

Shell

flexi-cli add avatar avatar-placeholder

Placeholder Text

With text

JK JK JK

<div class="flex flex-wrap items-center gap-2 w-max max-w-full mx-auto">
    <x-ui.avatar-placeholder size="xs" variant="subtle" intent="primary" text="JK" />
    <x-ui.avatar-placeholder size="sm" variant="subtle" intent="gray" text="JK" />
    <x-ui.avatar-placeholder size="md" variant="subtle" intent="neutral" text="JK" />
</div>

With Icon

<div class="flex flex-wrap items-center gap-2 w-max max-w-full mx-auto">
    <x-ui.avatar-placeholder size="xs" variant="subtle" intent="primary">
        <span class="iconify ph--user"></span>
    </x-ui.avatar-placeholder>
    <x-ui.avatar-placeholder size="sm" variant="subtle" intent="gray">
        <span class="iconify ph--user"></span>
    </x-ui.avatar-placeholder>
    <x-ui.avatar-placeholder size="md" variant="subtle" intent="neutral">
        <span class="iconify ph--user"></span>
    </x-ui.avatar-placeholder>
</div>

References

Avatar Component

The main avatar component is used to display user profile images. It supports different sizes and border radius options.

Prop	Type	Default	Description
`size`	string	'default'	Controls the size of the avatar. Available options: `xs` - Extra small `sm` - Small `default` - Medium (default) `lg` - Large `xl` - Extra large
`radius`	string	'circle'	Controls the border radius of the avatar. Available options: `none` - No border radius `md` - Medium border radius `xl` - Extra large border radius `circle` - Circular (default)

Avatar Placeholder Component

The avatar placeholder component is used when no image is available. It can display text or an icon.

Prop	Type	Default	Description
`size`	string	'default'	Controls the size of the avatar placeholder. Available options are the same as the avatar component.
`radius`	string	'circle'	Controls the border radius of the avatar placeholder. Available options are the same as the avatar component.
`text`	string\|null	null	The text to display inside the avatar placeholder. If not provided, the slot content will be used.
`variant`	string	'solid'	The visual style variant of the avatar placeholder. Can be one of: 'solid', 'outline', 'ghost', etc.
`intent`	string	'gray'	The color intent of the avatar placeholder. Common intents include 'primary', 'success', 'warning', 'danger', etc.

Edit this page

Badge

Compact status indic...