Empty State

Empty state components are used when a list, table, or other content area has no items to show. They inform the user and can provide a call to action.

Props

Prop	Type	Description
icon	React.ElementType	Optional icon component to display above the title.
title	string	The main heading for the empty state.
description	string	A more detailed explanation or instruction.
children	ReactNode	The action element(s), typically one or more Buttons.

Examples

Basic Empty State

The simplest form, with just a title and description.

No projects found

Get started by creating a new project.

<EmptyState
  title="No results found"
  description="Your search did not match any documents. Please try again."
/>

With Icon and Action

Includes an icon and a primary call-to-action button to guide the user on the next step.

No projects found

Get started by creating a new project.

import { FolderPlusIcon } from '...'; // Example icon import
import Button from '@/components/Button';

<EmptyState
  icon={FolderPlusIcon}
  title="No projects found"
  description="Get started by creating a new project."
>
  <Button variant="primary">New Project</Button>
</EmptyState>