# Empty
> Generated from empty.contract.json — do not edit by hand.

The placeholder for a surface that has no data yet.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `image` | 'default' | 'simple' | `default` | Built-in illustration: 64×41 line art, or a smaller 48×30 low-key graphic for tight surfaces |
| `description` | string | `—` | The caption; falls back to the default slot when absent, and renders nothing when set to "" |
| `(default slot)` | slot | `No data` | The caption (alternative to the `description` attribute) |
| `image` | slot | `—` | A custom picture (e.g. an <aha-icon>) that supersedes the built-in illustration |
| `action` | slot | `—` | An optional call to action (a button or link) |

## Visual standard (measured)
- Layout: centred column · gap 10 · padding 32/16 (simple: gap 8 · 20/16)
- Illustration: default 64×41 · simple 48×30 line art · #B5B5B5 (text-disabled)
- Caption: 14/22 (simple 13/20) #8A8A8A (text-tertiary) · hidden when description=""
- Custom image: slot="image" · supersedes the built-in art
- Action: slot="action" · hidden when empty

## When to use
- **Empty** — a list, table, or panel has nothing to show yet
- **Result** — reporting the outcome of an action (success, 404)
- **Skeleton** — content is loading, not absent

The caption says what's missing and, ideally, the next step — 'No responses yet — share the join link'. Keep one action; an empty state is a nudge, not a menu.