EmptyState

Placeholder component for empty lists, zero-result searches, and error states — with 6 built-in icon presets, optional action button, and 3 size variants.

Import

ts 
import EmptyState from '$lib/components/EmptyState.svelte';

Usage

All caught up

No new messages in your inbox.

svelte 
<EmptyState
  preset="inbox"
  title="All caught up"
  description="No new messages in your inbox."
/>

Presets

Six built-in icons covering the most common empty-state scenarios.

All caught up

No new messages in your inbox.

No results

Try adjusting your search terms.

No data yet

Charts will appear once you have activity.

This folder is empty

Upload files to get started.

No followers yet

Share your profile to grow your audience.

Something went wrong

We could not load this content.

svelte 
<!-- 7 built-in presets -->
<EmptyState preset="inbox"  title="All caught up"        description="No new messages." />
<EmptyState preset="search" title="No results"           description="Try different keywords." />
<EmptyState preset="data"   title="No data yet"          description="Charts appear once you have activity." />
<EmptyState preset="folder" title="This folder is empty" description="Upload files to get started." />
<EmptyState preset="users"  title="No followers yet"     description="Share your profile." />
<EmptyState preset="error"  title="Something went wrong" description="We could not load this content." />
<EmptyState preset="custom" title="Custom"               description="Bring your own icon via the icon snippet." />

With action button

Pass an action prop to render a call-to-action button.

No results found

We couldn't find anything matching your search. Try different keywords.

No followers yet

Start sharing your content to build your audience.

svelte 
<EmptyState
  preset="search"
  title="No results found"
  description="Try different keywords or filters."
  action={{ label: 'Clear search', onclick: () => clearSearch() }}
/>

Sizes

Use size to scale the icon, spacing and typography.

sm

No data

Nothing to show here.

md

No data

Nothing to show here.

lg

No data

Nothing to show here.

svelte 
<EmptyState preset="data" title="No data" size="sm" />
<EmptyState preset="data" title="No data" size="md" />
<EmptyState preset="data" title="No data" size="lg" />

Custom icon

Use preset="custom" and pass an icon snippet for full control.

No notifications

You are all caught up.

svelte 
<EmptyState preset="custom" title="No notifications" description="You are all caught up.">
  {#snippet icon()}
    <svg class="size-10 text-muted-foreground" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
      <path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
    </svg>
  {/snippet}
</EmptyState>

Inside a list

Toggle the list to see the empty state rendered in context with an action to restore it.

Design system review
Publish weekly reel
Reply to comments

API Reference

PropTypeDefaultDescription
preset 'inbox' | 'search' | 'data' | 'folder' | 'users' | 'error' | 'custom''inbox'Built-in icon preset. Use custom to supply your own icon snippet.
title string—Primary heading text.
description string—Secondary description text below the title.
action { label: string, onclick: () => void }—Optional call-to-action button rendered below the description.
size 'sm' | 'md' | 'lg''md'Controls icon size, spacing and text scale.
icon Snippet—Custom icon snippet — used when preset is "custom".
children Snippet—Additional content rendered below the action button.
class string—Extra CSS classes applied to the root element.