# Empty

The empty state for a list, a search or a page: media, a title, a line and what to do next.

```ehtml Example
import {
  Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent,
} from "@elements/ui/empty";
import { Icon } from "@elements/ui/icon";
import { Button } from "@elements/ui/button";

<Empty title="No projects yet" description="Create your first project to get started.">
  <Icon slot="icon" name="folder" />
  <EmptyContent>
    <Button variant="primary">Create project</Button>
  </EmptyContent>
</Empty>
```

## Parts

| Part | What it is |
|---|---|
| `EmptyHeader` | .empty-header: media, title, description. |
| `EmptyMedia` | .empty-media: an icon tile, an avatar, an image. |
| `EmptyTitle` | .empty-title, role=heading. |
| `EmptyDescription` | .empty-description, soft ink with underlined links. |
| `EmptyContent` | .empty-content: actions or a search field. |
| `.empty-actions` | A centered row of buttons. |

## Attributes

### Empty

| Attribute | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `""` | Renders a header with a title. |
| `description` | `string` | `""` | Renders a description in that header. |
| `variant` | `"default" \| "outline" \| "muted"` | `"default"` | outline is a dashed rule, muted a soft fill. |
| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2` | Heading level of the title. |
| `class` | `string` | `""` | Extra classes. |
| `attrs` | `Record<string, string \| number \| boolean \| undefined>` | `{}` | Other attributes for the root. |

### EmptyMedia

| Attribute | Type | Default | Description |
|---|---|---|---|
| `variant` | `"default" \| "icon"` | `"default"` | icon puts the icon on a muted tile. |

### EmptyTitle

| Attribute | Type | Default | Description |
|---|---|---|---|
| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | `2` | aria-level. |

### every part

| Attribute | Type | Default | Description |
|---|---|---|---|
| `class` | `string` | `""` | Extra classes. |

## Slots

| Slot | Part | Content |
|---|---|---|
| `icon` | `Empty` | The icon for the header the title shortcut renders. |
| `default` | `Empty` | Parts, or anything. |
| `default` | `each part` | The part's content. |

## Data attributes

| Attribute | Values | On |
|---|---|---|
| `data-variant` | `"default" \| "outline" \| "muted"` | root |
| `data-variant` | `"default" \| "icon"` | EmptyMedia |

## Accessibility

- The title is role="heading" (level 2 by default), so an empty page keeps its outline.
- No live region of its own: when it replaces search results, announce the result count from the search.

## See also

- [Icon](icon): An inline stroke icon from the set the templates draw their own controls with, sized in pixels and colored by the text around it.
- [Button](button): A button or a link that looks like one, in six variants and four sizes.
- [Badge](badge): A small label for a status, a count or a category, built on the pill.
- [Card](card): A surface with a header, body and footer, built on the base card styles.
- [Alert](alert): A callout that draws attention to a message, with an icon, a title and an action.
- [Kbd](kbd): A keyboard key or shortcut, as text.