# Empty state

Explains why a view has no content and what to do next, such as an empty list or a search without results.

```tsx
// demo.tsx
import {FolderOpenIcon} from '@earendil-works/elanor-icons-react';
import {Button, EmptyState} from '@earendil-works/elanor-react';

export default function EmptyStateDemo() {
  return (
    <EmptyState.Root>
      <EmptyState.Illustration>
        <FolderOpenIcon size={64} />
      </EmptyState.Illustration>
      <EmptyState.Body>
        <EmptyState.Copy>
          <EmptyState.Title level={2}>No saved views</EmptyState.Title>
          <EmptyState.Description>
            Save a set of filters to find the members you need faster.
          </EmptyState.Description>
        </EmptyState.Copy>
        <EmptyState.Actions>
          <Button>Create view</Button>
        </EmptyState.Actions>
      </EmptyState.Body>
    </EmptyState.Root>
  );
}
```

## Usage

```tsx
import {EmptyState} from '@earendil-works/elanor-react';

<EmptyState.Root>
  <EmptyState.Illustration />
  <EmptyState.Body>
    <EmptyState.Copy>
      <EmptyState.Title level={2} />
      <EmptyState.Description />
    </EmptyState.Copy>
    <EmptyState.Actions />
  </EmptyState.Body>
</EmptyState.Root>;
```

Set the title's `level` to fit the page outline. Illustration and Actions are optional. Copy limits the title and description to 30rem (480px at the default font size), or less in narrower containers.

## API

### `EmptyState.Root`

Renders `<div>`. Accepts its HTML attributes and `ref`.

### `EmptyState.Illustration`

Renders `<div>`. Accepts its HTML attributes and `ref`.

### `EmptyState.Body`

Renders `<div>`. Accepts its HTML attributes and `ref`.

### `EmptyState.Copy`

Renders `<div>`. Accepts its HTML attributes and `ref`.

### `EmptyState.Title`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `level` (required) | `1 \| … \| 6` | - | Heading level. Follow the page outline. |

Renders `<h1>`–`<h6>`. Also accepts its HTML attributes and `ref`.

### `EmptyState.Description`

Renders `<p>`. Accepts its HTML attributes and `ref`.

### `EmptyState.Actions`

Renders `<div>`. Accepts its HTML attributes and `ref`.