EmptyState

A placeholder component for displaying when there's no data to show.

Import

import { EmptyState } from '@/components/ui';

Basic Usage

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

Props

Prop Type Default Description
icon ComponentType - Icon component to display
title string required Main heading
description string - Supporting text
action { label: string, onClick: () => void } - CTA button
className string - Additional CSS classes

With Icon

import { FolderIcon } from '@/components/icons';

<EmptyState
  icon={FolderIcon}
  title="No projects"
  description="Create your first project to get started."
/>

With Action

import { PlusIcon } from '@/components/icons';

<EmptyState
  icon={FolderIcon}
  title="No projects"
  description="Create your first project to get started."
  action={{
    label: "Create Project",
    onClick: () => setShowDialog(true)
  }}
/>

Common Use Cases

Empty Table

import { UsersIcon } from '@/components/icons';

export function UsersTable({ users }) {
  if (users.length === 0) {
    return (
      <EmptyState
        icon={UsersIcon}
        title="No users yet"
        description="Invite team members to collaborate on your project."
        action={{
          label: "Invite User",
          onClick: () => setShowInviteModal(true)
        }}
      />
    );
  }

  return <Table>{/* ... */}</Table>;
}

Search Results

import { SearchIcon } from '@/components/icons';

export function SearchResults({ results, query }) {
  if (results.length === 0) {
    return (
      <EmptyState
        icon={SearchIcon}
        title="No results found"
        description={`We couldn't find anything matching "${query}". Try a different search term.`}
      />
    );
  }

  return <ResultsList results={results} />;
}

Empty Inbox

import { InboxIcon } from '@/components/icons';

<EmptyState
  icon={InboxIcon}
  title="All caught up!"
  description="You have no new notifications."
/>

No Permissions

import { LockIcon } from '@/components/icons';

<EmptyState
  icon={LockIcon}
  title="Access denied"
  description="You don't have permission to view this content."
  action={{
    label: "Request Access",
    onClick: handleRequestAccess
  }}
/>

Error State

import { ExclamationIcon } from '@/components/icons';

<EmptyState
  icon={ExclamationIcon}
  title="Something went wrong"
  description="We couldn't load the data. Please try again."
  action={{
    label: "Retry",
    onClick: refetch
  }}
/>

With DataTable

<DataTable
  columns={columns}
  data={data}
  emptyMessage={
    <EmptyState
      icon={DocumentIcon}
      title="No documents"
      description="Upload your first document to get started."
      action={{
        label: "Upload Document",
        onClick: () => setShowUpload(true)
      }}
    />
  }
/>

Styling

The EmptyState component features: