EmptyState

Centered placeholder for empty views with icon, title, description, and optional action slot. Three sizes control spacing, icon dimensions, and typography.

import { EmptyState, Button } from 'phoundry-ui';

Basic

No documents

Upload your first file to get started.

Show code

<EmptyState
  icon={PhiIcons.document}
  title="No documents"
  description="Upload your first file to get started."
/>

With Action Button

No projects yet

Create a project to organize your work.

Show code

<EmptyState
  icon={PhiIcons.folder}
  title="No projects yet"
  description="Create a project to organize your work."
>
  {#snippet action()}
    <Button variant="primary" icon={PhiIcons.add}>New Project</Button>
  {/snippet}
</EmptyState>

Sizes

Nothing here

Small variant.

Nothing here

Medium variant.

Nothing here

Large variant.

Show code

<EmptyState size="sm" title="Nothing here" description="Small variant." />
<EmptyState size="md" title="Nothing here" description="Medium variant." />
<EmptyState size="lg" title="Nothing here" description="Large variant." />

Props

Prop	Type	Default	Description
icon	string	—	Iconify icon string shown above the title.
title required	string	—	Main heading text.
description	string	—	Supporting text below the title.
action	Snippet	—	Action area — typically a Button.
size	'sm' \| 'md' \| 'lg'	'md'	Controls spacing, icon size, and typography scale.
class	string	—	Additional CSS classes.

Usage tips

Use the action snippet to provide a clear call-to-action (e.g. “Create”, “Upload”, “Import”).
Use size="sm" for inline empty states (e.g. inside a card or panel) and size="lg" for full-page views.
Always provide a description to guide the user on what to do next.
icon is optional — omit it for text-only empty states in tight layouts.