SectionErrorFallback

Presentational 404/500 block with a configurable title, body, and link actions.

Usage

svelte

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

<SectionErrorFallback
  status={404}
  title="Nothing here"
  body="The page you are looking for does not exist."
  actions={[
    { label: "Components", href: "/design/components" },
    { label: "Home", href: "/design" },
  ]}
/>

Examples

Not found

Nothing here

The page you are looking for does not exist.

Components Home

<script lang="ts">
  import { SectionErrorFallback } from "@milandekruijf/ui/svelte";
  import { routeLocalizeHref } from "#lib/i18n/sveltekit.js";
</script>

<SectionErrorFallback
  status={404}
  title="Nothing here"
  body="The page you are looking for does not exist."
  actions={[
    { label: "Components", href: routeLocalizeHref("/design/components") },
    {
      label: "Home",
      href: routeLocalizeHref("/design"),
      color: "ghost" as const,
    },
  ]}
/>

Props

Prop	Type	Default	Description
status	`number`	—	HTTP-ish status; `404` renders the plain not-found body.
title	`string`	—	Localized heading.
body?	`string`	—	Localized body copy, typically for 404s.
errorMessage?	`string`	—	Raw error text for non-404 failures.
actions?	`ErrorAction[]`	[]	Buttons as `{ label, href, color? }`; rendered as client-side links.