Foundation

Empty

Empty-state placeholder for lists, tables, and panels with nothing to render. Centered icon + title + description + action.

Examples

Full layout

No books yet

Drop an EPUB or PDF here, or import from the cloud.

<Empty
  title="No books yet"
  description="Drop an EPUB or PDF here, or import from the cloud."
>
  {#snippet icon()}
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
      <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
      <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2Z" />
    </svg>
  {/snippet}
  {#snippet action()}
    <Button>Import library</Button>
  {/snippet}
</Empty>

Title only

Nothing here yet

<Empty title="Nothing here yet" />

Props

Prop	Type	Default	Description
`title`	`string`	`—`	Required headline.
`description`	`string`	`—`	Optional muted body line.
`icon`	`Snippet`	`—`	Optional icon snippet (typically an SVG).
`action`	`Snippet`	`—`	Optional action slot below the body (typically a Button).

Install

CLI

npx @a3tai/mittsu add empty