---
title: Empty
description: What to show when a list or a panel has nothing in it.
---

```tsx
import { Empty } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function EmptyBasic() {
  return (
    <Preview>
      <Empty.Root>
        <Empty.Title>Title</Empty.Title>
        <Empty.Description>Description</Empty.Description>
      </Empty.Root>
    </Preview>
  );
}
```

- The title says what is empty; the description says why or what to do.
- No illustration and no icon. At most one ghost action.
- Use `size="sm"` inside a block of a dashboard, where a page-sized empty state would push the layout apart.
- Inside a [List](/deft/components/list), use `List.Empty`.

## API

| Prop | Type | Default | Description |
| - | - | - | - |
| `size?` | `"sm" \| "md"` | `"md"` | On Root. `md` fills a page or a panel, `sm` fits a dashboard block. |

Parts: `Root`, `Actions`, `Description`, `Title`. Other props go to the native element: `div` for `Root` and `Actions`, `p` for `Description` and `Title`.