# EmptyState

> A list or a widget with nothing in it. It fits inside a Card, where ChromeMessage takes the whole page. It says what is missing and offers the one thing to do: create or connect when there is nothing yet, clear the filters when a filter found nothing.

Section: Feedback. Docs: https://entrepta.vercel.app/docs/components/empty-state

## Install

```bash
npx @entrepta/cli@latest add empty-state
```

Files: `feedback/empty-state.tsx`, `lib/icon.tsx`, `primitives/icon-tile.tsx`.
npm packages: `@phosphor-icons/react`, `class-variance-authority`.
Comes with: `icon-lib`, `icon-tile`.

## Usage

```tsx
import { EmptyState } from "@/components/entrepta/empty-state"

<EmptyState
  icon={TrayIcon}
  title="No entries this month"
  description="Add one, or connect an account to bring them in."
  action={<Button>add an entry</Button>}
/>

<EmptyState
  size="sm"
  title="Nothing for this filter"
  action={<Button variant="ghost" onClick={clear}>clear filters</Button>}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `ReactNode` | - | What is missing, in the reader's words. Required |
| `description` | `ReactNode` | - | The next step, not a welcome |
| `icon / action` | `Icon \| ReactElement / ReactNode` | - | A tile above, and one action below |
| `size` | `"sm" \| "md"` | "md" | sm for a widget |