# Empty State

Explain missing content and offer a next step with optional media, details, and actions.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils, typography
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add empty-state
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Actions

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Content

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Description

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Header

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Media

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Root

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Title

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |
| level | HeadingLevel \| undefined | 2 | No | No | Heading level in the surrounding document. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { Snippet } from 'svelte';
import type { HTMLAttributes } from 'svelte/elements';
import type { HeadingLevel } from '../typography';
import Root from './empty-state.svelte';
import Actions from './empty-state-actions.svelte';
import Content from './empty-state-content.svelte';
import Description from './empty-state-description.svelte';
import Header from './empty-state-header.svelte';
import Media from './empty-state-media.svelte';
import Title from './empty-state-title.svelte';

export type EmptyStateProps = HTMLAttributes<HTMLDivElement> & {
    /** Content rendered inside. */
    children?: Snippet;
};

export type EmptyStateHeaderProps = HTMLAttributes<HTMLDivElement> & {
    /** Content rendered inside. */
    children?: Snippet;
};

export type EmptyStateMediaProps = HTMLAttributes<HTMLDivElement> & {
    /** Content rendered inside. */
    children?: Snippet;
};

export type EmptyStateTitleProps = HTMLAttributes<HTMLHeadingElement> & {
    /** Heading level in the surrounding document. */
    level?: HeadingLevel;
    /** Content rendered inside. */
    children?: Snippet;
};

export type EmptyStateDescriptionProps = HTMLAttributes<HTMLParagraphElement> & {
    /** Content rendered inside. */
    children?: Snippet;
};

export type EmptyStateContentProps = HTMLAttributes<HTMLDivElement> & {
    /** Content rendered inside. */
    children?: Snippet;
};

export type EmptyStateActionsProps = HTMLAttributes<HTMLDivElement> & {
    /** Content rendered inside. */
    children?: Snippet;
};

export { Actions, Content, Description, Header, Media, Root, Title };
~~~~

## Examples

### Inbox

~~~~svelte
<script lang="ts">
    import { CheckmarkCircle02Icon } from '@hugeicons/core-free-icons';
    import * as EmptyState from '@mielui/svelte/components/empty-state';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';
</script>

<EmptyState.Root class="max-w-sm">
    <EmptyState.Media aria-hidden="true" class="text-success">
        <HugeiconsIcon icon={CheckmarkCircle02Icon} class="size-7" />
    </EmptyState.Media>
    <EmptyState.Header>
        <EmptyState.Title>You're all caught up</EmptyState.Title>
        <EmptyState.Description>
            No new messages. We'll let you know when someone replies.
        </EmptyState.Description>
    </EmptyState.Header>
</EmptyState.Root>
~~~~

### Search

~~~~svelte
<script lang="ts">
    import { Search01Icon } from '@hugeicons/core-free-icons';
    import { Button } from '@mielui/svelte/components/button';
    import * as EmptyState from '@mielui/svelte/components/empty-state';
    import HugeiconsIcon from '@mielui/svelte/hugeicons-icon';

    let query = $state('invoice');

    const title = $derived(query ? 'No matching files' : 'Search cleared');
    const description = $derived(
        query
            ? `Nothing matches "${query}". Try another file name or clear your search.`
            : 'No search filter is active. Your files will appear here when available.'
    );

    function clearSearch() {
        query = '';
    }
</script>

<EmptyState.Root class="max-w-sm">
    <EmptyState.Media aria-hidden="true">
        <HugeiconsIcon icon={Search01Icon} class="size-6" />
    </EmptyState.Media>
    <EmptyState.Header>
        <EmptyState.Title>{title}</EmptyState.Title>
        <EmptyState.Description>{description}</EmptyState.Description>
    </EmptyState.Header>
    {#if query}
        <EmptyState.Actions>
            <Button variant="secondary" onclick={clearSearch}>Clear search</Button>
        </EmptyState.Actions>
    {/if}
</EmptyState.Root>
~~~~

For the rendered reference, visit [/docs/components/empty-state](/docs/components/empty-state).