# Empty

An empty state with icon, text and actions.

Group: Layout

## Import

```tsx
import { Empty } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function EmptyDemo() {
  return (
    <Empty.Root variant="outline">
      <Empty.Header>
        <Empty.Media variant="icon">
          <FolderIcon />
        </Empty.Media>
        <Empty.Title>No Projects Yet</Empty.Title>
        <Empty.Description>You haven't created any projects yet. Get started by creating your first project.</Empty.Description>
      </Empty.Header>
      <Empty.Content>
        <HStack>
          <Button size="sm">Create Project</Button>
          <Button size="sm" variant="outline">
            Import Project
          </Button>
        </HStack>
      </Empty.Content>
    </Empty.Root>
  )
}
```

## Props

### Root

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"plain" \| "outline"` | `plain` | `"outline"` draws a dashed border. |

### Media

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "icon"` | `default` | `"icon"` puts the icon in a muted box. `"default"` is free-form (image/illustration). |

`*` = required. Style props and HTML attributes are accepted too.