Empty

No Projects Yet

You haven't created any projects yet. Get started by creating your first project.

Usage

<x-empty
    icon="heroicon-o-book-open"
    title="No Projects Yet"
    description="You haven't created any projects yet." />

Custom Description Markup

Instead of setting the description attribute, which renders its contents within an x-paragraph component, the description slot can be used for custom markup.

Cloud Storage Full

You've reached your storage limit. Upgrade your storage plan or review your usage.

<x-empty
    icon="heroicon-o-cloud"
    title="Cloud Storage Full">
    <x-slot:description>
        <x-paragraph>
            You've reached your storage limit. Upgrade your storage plan or review <a href="#">your usage</a>.
        </x-paragraph>
    </x-slot:description>
    <x-btn size="sm">
        Upgrade Plan
    </x-btn>
</x-empty>

Custom Icon Markup

Instead of setting the icon attribute, which uses an x-layout.icon component, the icon slot can be used for custom markup.

No Team Members

Invite members to your team to collaborate on this project.

<x-empty
    title="No Team Members"
    description="Invite members to your team to collaborate on this project.">
    <x-slot:icon>
        <x-avatar.stack>
            <x-avatar />
            <x-avatar />
            <x-avatar />
        </x-avatar.stack>
    </x-slot:icon>

    <x-btn size="sm">
        <x-slot:prefix>
            <x-heroicon-o-user-plus class="size-4" />
        </x-slot:prefix>
        Invite Members
    </x-btn>
</x-empty>

Additional Content

Place additional content such as actions or supplementary information in the default slot.

404 - Not Found

The page you're looking for doesn't exist.

Need help? Contact support

<x-empty
    title="404 - Not Found"
    description="The page you're looking for doesn't exist.">
    <div class="w-full max-w-3/4">
        <x-form-input name="search-page" placeholder="Search pages...">
            <x-slot:icon-prefix>
                <x-form-icon icon="heroicon-o-magnifying-glass" />
            </x-slot:icon-prefix>
        </x-form-input>
    </div>
    <x-paragraph>
        Need help? <a href="#">Contact support</a>
    </x-paragraph>
</x-empty>

Component API

x-empty

Attribute	Default	Description
`title`	`void`	`string` Controls the heading of the empty state.
`description`	`null`	`string` Optional description after the heading.
`icon`	`null`	`string` When set, adds a `<x-layout.icon` component before the heading.

#Usage

#Custom Description Markup

#Custom Icon Markup

#Additional Content

#Component API

#x-empty