EmptyState

The block a surface shows when it has nothing to show: a title, a short explanation and one action. No illustration set to maintain.

Examples

With an action

No projects yet

Create a project to start tracking work.

Show code

<EmptyState
  title="No projects yet"
  description="Create a project to start tracking work."
>
  {#snippet action()}
    <Button>New project</Button>
  {/snippet}
</EmptyState>

With an icon

No results

Try a different search.

Show code

<EmptyState title="No results" description="Try a different search.">
  {#snippet icon()}
    <svg viewBox="0 0 20 20">…</svg>
  {/snippet}
</EmptyState>

Props

Prop	Type	Default	Description
`title`	`string`	`—`	The heading.
`description`	`string`	`—`	Optional supporting line.
`level`	`2 \| 3 \| 4`	`3`	Heading level for the title.
`icon`	`Snippet`	`—`	Optional icon, rendered inside a bordered circle.
`action`	`Snippet`	`—`	Optional call to action below the copy.

Every part except the title is optional. The heading level defaults to h3 so it sits under a page or card heading; set level to match your outline.