Studio
2

Empty State

Installation

pnpm dlx @mielui/svelte add empty-state

Usage

Root controls spacing and alignment. Header groups Title and Description. Put an icon or image in Media, supporting content in Content, and existing Buttons or links in Actions. Every part is optional and stays where you place it. There is no default border or background, so the empty state can sit inside a table, panel, or page without adding another card.

import { Button } from '$lib/mielui/components/button';
import * as EmptyState from '$lib/mielui/components/empty-state';

<EmptyState.Root>
    <EmptyState.Header>
        <EmptyState.Title>No saved reports</EmptyState.Title>
        <EmptyState.Description>
            Save a report to return to it later.
        </EmptyState.Description>
    </EmptyState.Header>
    <EmptyState.Actions>
        <Button href="/reports/new">Create report</Button>
    </EmptyState.Actions>
</EmptyState.Root>

Examples

No search results

An icon, a heading, and a short explanation. Keep search and filter controls in the surrounding application.

Completed work

A confirmation icon marks a completed task. This composition omits Actions and Content.

Accessibility

Title renders an h2 by default. Use level to match the surrounding heading outline. Mark decorative icons with aria-hidden on Media. Give meaningful images their own alt text. Parts forward native attributes and event handlers to their elements.

Root does not announce itself or move focus. For changing search results, keep a separate role="status" element mounted and update its text. Keep interactive actions outside that live region. If an action removes the focused control, move focus to the next useful control. Loading and failed requests need their own messages; an empty result should mean the request finished successfully.

API reference

EmptyState.Root

Prop Type Default
children Snippet<[]> | undefined —

EmptyState.Actions

Prop Type Default
children Snippet<[]> | undefined —

EmptyState.Content

Prop Type Default
children Snippet<[]> | undefined —

EmptyState.Description

Prop Type Default
children Snippet<[]> | undefined —

EmptyState.Header

Prop Type Default
children Snippet<[]> | undefined —

EmptyState.Media

Prop Type Default
children Snippet<[]> | undefined —

EmptyState.Title

Prop Type Default
children Snippet<[]> | undefined —
level HeadingLevel | undefined 2