EmptyState

Placeholder for empty lists or content areas. Provides consistent empty state display with icon, description, and optional call-to-action button.

Installation

typescript

import { EmptyState } from '@happyvertical/smrt-svelte';

Basic Usage

Simple empty state with title and description.

No items yet

Get started by creating your first item.

svelte

<EmptyState
  title="No items yet"
  description="Get started by creating your first item."
/>

With Action Button

Add a call-to-action button using actionLabel and actionHref.

No documents

Upload your first document to get started.

Upload Document

svelte

<EmptyState
  title="No documents"
  description="Upload your first document to get started."
  icon="document"
  actionLabel="Upload Document"
  actionHref="/upload"
/>

Icon Variants

Built-in icons for common empty states.

No documents

No folders

No users

No results

Empty inbox

svelte

<EmptyState title="No documents" icon="document" />
<EmptyState title="No folders" icon="folder" />
<EmptyState title="No users" icon="users" />
<EmptyState title="No results" icon="search" />
<EmptyState title="Empty inbox" icon="inbox" />

Size Variants

Three sizes for different contexts.

Small empty state

Compact size for cards

Medium empty state

Default size

svelte

<EmptyState title="Small" size="sm" />
<EmptyState title="Medium" size="md" />
<EmptyState title="Large" size="lg" />

With Click Handler

Use onaction for button click handling instead of navigation.

No projects

Create a new project to get started.

svelte

<EmptyState
  title="No projects"
  description="Create a new project to get started."
  icon="folder"
  actionLabel="Create Project"
  onaction={() => openModal()}
/>

Props

Prop	Type	Default	Description
`title` *	`string`	-	Main title text
`description`	`string`	-	Optional description text
`icon`	`'document' \| 'folder' \| 'users' \| 'search' \| 'inbox' \| Snippet`	`'inbox'`	Icon to display
`actionLabel`	`string`	-	Label for the action button
`actionHref`	`string`	-	URL for the action button (renders as link)
`onaction`	`() => void`	-	Click handler for the action button
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant

TypeScript

typescript

import { EmptyState } from '@happyvertical/smrt-svelte';

type IconType = 'document' | 'folder' | 'users' | 'search' | 'inbox';

interface Props {
  title: string;
  description?: string;
  icon?: IconType | Snippet;
  actionLabel?: string;
  actionHref?: string;
  onaction?: () => void;
  size?: 'sm' | 'md' | 'lg';
}