EmptyState

Placeholder shown when a section, list, or table has no data to display. Centered layout with optional icon, title, description, and action button.

When to use

• Empty lists / tables — no search results, no items yet.
• First-run experiences — guide the user toward a primary action.
• Filtered-out content — all items hidden by the current filter.

When NOT to use

• For error states — use Alert with a destructive variant instead.
• For loading states — use Skeleton placeholders.

Import

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

Basic usage

<EmptyState
  title="No results found"
  description="Try adjusting your search or filters."
/>

With action

import { Button } from '@mihcm/ui/Button';
 
<EmptyState
  title="No projects yet"
  description="Create your first project to get started."
  action={<Button>Create project</Button>}
/>

Composition

• icon accepts any 48 px SVG or Lucide icon for visual context.
• action is the primary CTA — use a single Button. For secondary actions, pass a link below.
• description keeps the message to 1-2 sentences. Long explanations belong on a help page.
• Center the empty state vertically in its container for balanced layout.

Related

• Skeleton — loading placeholder before data arrives.
• Alert — inline message banners for errors and warnings.
• Card — container that often hosts an EmptyState.