Empty

A placeholder component for empty states, such as when no data is available.

Default

No documents

You haven't created any documents yet.

    <.empty>
  <:icon>
    <.icon name="lucide-file" class="size-12" />
  </:icon>
  <:title>No documents</:title>
  <:description>You haven't created any documents yet.</:description>
</.empty>
  

With Actions

Add action buttons using the :actions slot to help users take the next step.

With Actions

No projects

Get started by creating a new project.

    <.empty>
  <:icon>...</:icon>
  <:title>No projects</:title>
  <:description>Get started by creating a new project.</:description>
  <:actions>
    <.button>New Project</.button>
  </:actions>
</.empty>
  

Outline Variant

Use variant="outline" for a bordered appearance.

Outline

No attachments

Drag and drop files here or click to browse.

    <.empty variant="outline">
  <:icon>...</:icon>
  <:title>No attachments</:title>
  <:description>Drag and drop files here.</:description>
  <:actions>
    <.button variant="outline">Browse Files</.button>
  </:actions>
</.empty>
  

With Footer

Use the :footer slot for additional information or links.

With Footer

No results found

Try adjusting your search or filters.

Clear all filters

    <.empty>
  <:icon>...</:icon>
  <:title>No results found</:title>
  <:description>Try adjusting your search or filters.</:description>
  <:footer>
    <a href="#">Clear all filters</a>
  </:footer>
</.empty>
  