# EmptyState

A quiet explanation and optional next action when content is absent.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, EmptyState, Button } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <EmptyState title="No projects yet" description="Create a project to get started." actions={<Button>Create project</Button>} />
    </FloodRoot>
  );
}
```

## Design notes

- Composes Stack, Heading, Text, IconSlot and Inline. Optional icon is decorative; title and description explain the missing content.
- Static by default, without status/alert announcements or automatic focus. Host owns whether a result change should be announced.
- Choose headingLevel for the page hierarchy. Density controls relative padding. Host actions remain ordinary named controls; no loading, fetching or error recovery engine is supplied.
- Available in 0.2.4; use matching installed declarations.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `title` | `string` | `Required` |
| `description` | `ReactNode` | `—` |
| `icon` | `ReactNode` | `—` |
| `actions` | `ReactNode` | `—` |
| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `2` |
| `density` | `"compact" \| "comfortable"` | `"comfortable"` |
| `Native HTML props` | `Omit<HTMLAttributes<HTMLDivElement>, "title" \| "children">` | `Forwarded` |