Empty State

Empty State

Component File: src/components/shared/EmptyState.tsx Route: Shared component Access Level: All authenticated users Last Updated: March 8, 2026 Status: Active

Overview

EmptyState provides the standard zero-result UI for CRM and list surfaces. Use it instead of writing inline empty-state markup when a table, grid, or filtered list has no results.

Props

interface EmptyStateProps {
  icon: LucideIcon;
  title: string;
  description: string;
  actionLabel?: string;
  onAction?: () => void;
  className?: string;
}

Usage

<EmptyState
  icon={Users}
  title="No team members yet"
  description="Add the first team member for this fund to get started."
  actionLabel="Add Member"
  onAction={() => setAddPersonOpen(true)}
/>

Standard Rules

• Use on CRM/list zero states and filtered empty results.
• Prefer a concrete title plus one sentence of next-step guidance.
• Add an action button only when there is a clear next action.
• Keep wrapper-specific spacing in the caller by using className when needed.

Related Documentation

• DEVELOPER-PLAYBOOK.md
• UI-COMPONENT-REFERENCE.md

Synced from IFMmvp-Frontend documentation: pages/components/25-EMPTY-STATE.md