# Empty State

What an empty list or page says: a title, one line on what goes here, and one action.

Source page: https://sproutboat.com/ikada/components/empty-state

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/empty-state.json
```
Or from the package: `import { EmptyState } from "@sproutboat/ikada";`
## Usage
```tsx
import { EmptyState } from "@/components/ikada/empty-state";

<EmptyState
  icon={<RocketIcon />}
  title="No deploys yet"
  description="Deploy robin to see its builds and logs here."
  action={<Button variant="primary" size="sm">Deploy robin</Button>}
/>
```
## Examples
### With one action
A title, one line on what goes here, and one action. A second action means it is saying too much.
```tsx
<EmptyState
  icon={<RocketIcon />}
  title="No deploys yet"
  description="Deploy robin to see its builds and logs here."
  action={
    <Button variant="primary" size="sm">
      <PlusIcon />
      Deploy robin
    </Button>
  }
/>
```
### Nothing to do
When there is no action to take, the title and one line are enough.
```tsx
<EmptyState
  icon={<InboxIcon />}
  title="No alerts"
  description="finch and wren are both healthy."
/>
```
### Title only

```tsx
<EmptyState title="No sprouts in eu-west" />
```
## Props
### EmptyStateProps
Also takes every prop of `Omit<ComponentProps<"div">, "title">`.
| Prop | Type | Description |
| --- | --- | --- |
| icon? | `ReactNode` | Icon above the title, drawn on a soft tile. |
| title | `ReactNode` | What is empty, as a short heading. |
| description? | `ReactNode` | One line: what this list will hold or what to do next. |
| action? | `ReactNode` | One action. A second one means the empty state is saying too much. |
| as? | `"h2" \| "h3" \| "h4"` | Heading level of the title. Default `h3`. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/empty-state.tsx