Slate
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Empty

Use to display an empty state when a list, table, or page has no content yet.

Usage
No projects yet

You have not created any projects. Get started by creating your first one.

example.blade.php 
<x-slate::empty
    title="No projects yet"
    description="You have not created any projects. Get started by creating your first one."
>
    <x-slot:media>
        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" stroke-linecap="round" stroke-linejoin="round" />
        </svg>
    </x-slot:media>
    <x-slot:actions>
        <x-slate::button>Create project</x-slate::button>
        <x-slate::button variant="outline">Import</x-slate::button>
    </x-slot:actions>
</x-slate::empty>

Composition
code 
Empty
├── EmptyHeader
│   ├── EmptyMedia
│   ├── EmptyTitle
│   └── EmptyDescription
└── EmptyContent
No results

Try a different search or clear filters.

example.blade.php 
<x-slate::empty>
    <x-slate::empty-header>
        <x-slate::empty-media variant="icon">
            <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
                <circle cx="11" cy="11" r="8" />
                <path d="m21 21-4.3-4.3" stroke-linecap="round" />
            </svg>
        </x-slate::empty-media>
        <x-slate::empty-title>No results</x-slate::empty-title>
        <x-slate::empty-description>
            Try a different search or clear filters.
        </x-slate::empty-description>
    </x-slate::empty-header>
    <x-slate::empty-content>
        <x-slate::button variant="outline">Clear filters</x-slate::button>
    </x-slate::empty-content>
</x-slate::empty>

API Reference

Empty
Prop Type Default Description
title string — Progressive title
description string — Progressive description

Named slots: media, actions.

EmptyMedia
Prop Type Default Description
variant icon | default icon Icon chip vs plain media
Last updated .