FilterEmptyState

Empty and filtered-empty states with an optional reset action.

Usage

svelte

<script lang="ts">
  import { FilterEmptyState } from "@milandekruijf/ui/svelte";

  const items = ["Static i18n plumbing", "Prerendered sitemap"];

  let selected = $state<string[]>([]);
  const visible = $derived(
    selected.length === 0 ? items : items.filter((i) => selected.every((t) => i.includes(t))),
  );
</script>

<FilterEmptyState
  totalCount={items.length}
  filteredCount={visible.length}
  hasActiveFilters={selected.length > 0}
  emptyLabel="No items yet."
  emptyFilteredLabel="No items match these tags."
  resetLabel="Reset filters"
  onReset={() => (selected = [])}
/>

Examples

Filtered empty

Static i18n plumbing
Prerendered sitemap

<script lang="ts">
  import { css } from "@milandekruijf/pandacss/css";
  import { Button, FilterEmptyState } from "@milandekruijf/ui/svelte";

  const items = ["Static i18n plumbing", "Prerendered sitemap"];

  let selected = $state<string[]>([]);
  const visible = $derived(
    selected.length === 0
      ? items
      : items.filter((item) =>
          selected.every((tag) => item.toLowerCase().includes(tag)),
        ),
  );

  function reset() {
    selected = [];
  }
</script>

<div class={css({ display: "flex", flexDirection: "column", gap: 4, minW: 0 })}>
  <div class={css({ display: "flex", gap: 2 })}>
    <Button
      size="sm"
      color={selected.length > 0 ? "slate" : "ghost"}
      onclick={() => (selected = ["missing"])}
    >
      Filter to nothing
    </Button>
    <Button size="sm" color="ghost" onclick={reset}>Show all</Button>
  </div>
  <FilterEmptyState
    totalCount={items.length}
    filteredCount={visible.length}
    hasActiveFilters={selected.length > 0}
    emptyLabel="No items yet."
    emptyFilteredLabel="No items match these tags."
    resetLabel="Reset filters"
    onReset={reset}
  />
  {#if visible.length > 0}
    <ul class={css({ m: 0, p: 0, listStyle: "none" })}>
      {#each visible as item (item)}
        <li class={css({ color: "slate.12", py: 1 })}>{item}</li>
      {/each}
    </ul>
  {/if}
</div>

Props

Prop	Type	Default	Description
totalCount	`number`	—	Items before filtering; `0` renders the plain empty state.
filteredCount	`number`	—	Items after filtering.
hasActiveFilters	`boolean`	—	Whether any filter differs from its default.
emptyLabel	`string`	—	Shown when there is nothing to list at all.
emptyFilteredLabel	`string`	—	Shown when filters hide every item.
resetLabel	`string`	—	Reset button label.
onReset	`() => void`	—	Clears every filter back to its default.
class?	`string`	—	Extra classes merged on the block.

Renders nothing while `filteredCount` is non-zero; place it below the panel, above the result grid.