EmptyState

A zero-data placeholder — a centered icon + title + description + optional action. Shown when a list, table, or search has no results. Shared variant/size axes.

With action

No projects yet

Create your first project to get started — it only takes a minute.

<script>
  import { EmptyState, Button } from '@spaethtech/svelte-ui';
</script>

<EmptyState title="No projects yet"
  description="Create your first project to get started.">
  {#snippet action()}
    <Button text="New project" variant="primary" />
  {/snippet}
</EmptyState>

EmptyState

With action

No projects yet

Custom icon + sizes

No results

Inbox zero