Empty State

x-empty-state

A friendly placeholder for when there's no data yet — an icon, title, description and an optional action. Pass an <x-slot:icon> to customize the glyph.

php artisan components:add empty-state

Examples

Basic

An icon, title, description and a call-to-action button.

<div class="flex w-full max-w-md justify-center">
    <x-components.empty-state title="No projects yet" description="Create your first project to get started — it only takes a minute.">
        <x-components.button size="sm">New project</x-components.button>
    </x-components.empty-state>
</div>

Props

Prop	Type	Default	Description
`title`	text	`—`	The headline message.
`description`	text	`—`	Supporting text below the title.

Slots

Slot	Description
`icon`	Custom icon overriding the default illustration.
`slot`	Call-to-action buttons or content shown below the description.