Empty State

Installation

pnpm dlx @mielui/svelte add empty-state

npx @mielui/svelte add empty-state

yarn dlx @mielui/svelte add empty-state

bunx @mielui/svelte add empty-state

Usage

Root sets spacing and alignment. Header groups Title and Description. Put an icon or image in Media, supporting content in Content, and buttons or links in Actions. Every part is optional and renders where you place it. Root has no border or background, so it can sit inside a table, panel, or page without adding another card.

<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as EmptyState from '@mielui/svelte/components/empty-state';
</script>

<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>

Accessibility

Title renders an h2 by default; set level to match the surrounding heading outline. Mark decorative icons with aria-hidden on Media and give meaningful images alt text. Every part accepts the attributes and event handlers of the element it renders.

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.