Skip to main content

ErrorLayout

ErrorLayout

Layout for error pages with status codes and messaging

Tags: component layout error

View Demo

ErrorLayout provides a centered layout for displaying error pages with status codes, messages, and action buttons.

Import​

<script>
  import { ErrorLayout } from '@classic-homes/theme-svelte';
</script>

Basic Usage​

<ErrorLayout statusCode={404} />

Props​

Prop Type Default Description
statusCode number - HTTP status code (404, 500, etc.)
title string - Custom title (overrides default)
description string - Error description
showLogo boolean true Show logo at top
logo Snippet - Custom logo
showHomeButton boolean true Show "Go Home" button
homeUrl string '/' Home button URL
homeText string 'Go Home' Home button text
showBackButton boolean true Show "Go Back" button
backText string 'Go Back' Back button text
illustration Snippet - Custom illustration
actions Snippet - Additional actions
footer Snippet - Footer content
class string - Additional classes
children Snippet - Custom content
logoHref string '/' URL for logo link (defaults to '/')
standalone boolean true Whether this layout owns the whole page (default). Set false inside an app layout that already renders the page chrome and its own <main> (e.g. a SvelteKit +error.svelte), so AppShell and the main landmark are not duplicated

Default Messages​

ErrorLayout includes default messages for common HTTP status codes:

Code Title Description
400 Bad Request The request could not be understood
401 Unauthorized Please sign in to access this page
403 Access Denied You don't have permission
404 Page Not Found The page doesn't exist or has been moved
500 Server Error Something went wrong on our end
502 Bad Gateway Invalid response from the server
503 Service Unavailable Temporarily offline for maintenance
504 Gateway Timeout The server took too long to respond

404 Not Found​

<ErrorLayout statusCode={404} />

500 Server Error​

<ErrorLayout statusCode={500} />

Custom Messages​

Override default titles and descriptions:

<ErrorLayout
  statusCode={404}
  title="Oops! Page not found"
  description="We couldn't find what you were looking for. It might have been moved or deleted."
/>

Custom Illustration​

Replace the status code with an illustration:

<ErrorLayout statusCode={404}>
  {#snippet illustration()}
    <img src="/404-illustration.svg" alt="" class="w-64 h-64" />
  {/snippet}
</ErrorLayout>

Additional Actions​

Add extra buttons or links:

<ErrorLayout statusCode={500}>
  {#snippet actions()}
    <Button variant="outline" onclick={reportIssue}>Report Issue</Button>
    <a href="/status" class="text-sm text-primary"> Check system status </a>
  {/snippet}
</ErrorLayout>

Custom Content​

Replace the entire default display:

<ErrorLayout>
  <div class="text-center">
    <h1 class="text-4xl font-bold">Under Maintenance</h1>
    <p class="mt-4 text-muted-foreground">We're making some improvements. Back soon!</p>
    <div class="mt-8">
      <Spinner label="Updating..." />
    </div>
  </div>
</ErrorLayout>
<ErrorLayout statusCode={404} showLogo={false} />

Custom Buttons​

<ErrorLayout
  statusCode={403}
  homeText="Return to Dashboard"
  homeUrl="/dashboard"
  backText="Previous Page"
/>

Hide Buttons​

<ErrorLayout statusCode={401} showHomeButton={false} showBackButton={false}>
  {#snippet actions()}
    <Button href="/login">Sign In</Button>
  {/snippet}
</ErrorLayout>
<ErrorLayout statusCode={500}>
  {#snippet footer()}
    <p class="text-sm text-muted-foreground">
      Error ID: {errorId} • <a href="/support">Contact Support</a>
    </p>
  {/snippet}
</ErrorLayout>

Examples​

SvelteKit Error Page​

<!-- src/routes/+error.svelte -->
<script>
  import { page } from '$app/stores';
  import { ErrorLayout } from '@classic-homes/theme-svelte';
</script>

<ErrorLayout statusCode={$page.status} description={$page.error?.message} />

Access Denied​

<ErrorLayout
  statusCode={403}
  title="Access Denied"
  description="You need additional permissions to view this page."
  showBackButton={false}
>
  {#snippet actions()}
    <Button href="/request-access">Request Access</Button>
    <Button variant="outline" href="/dashboard">Back to Dashboard</Button>
  {/snippet}
</ErrorLayout>

Session Expired​

<ErrorLayout
  statusCode={401}
  title="Session Expired"
  description="Your session has expired. Please sign in again to continue."
  showBackButton={false}
  showHomeButton={false}
>
  {#snippet actions()}
    <Button href="/login">Sign In Again</Button>
  {/snippet}
</ErrorLayout>

Maintenance Mode​

<ErrorLayout
  title="Scheduled Maintenance"
  description="We're currently performing system upgrades. Expected completion: 2:00 PM EST"
  showBackButton={false}
>
  {#snippet illustration()}
    <svg class="w-32 h-32 text-muted-foreground">
      <!-- Maintenance icon -->
    </svg>
  {/snippet}
</ErrorLayout>

Accessibility​

  • Clear error messaging
  • Action buttons for navigation
  • Logo links to home
  • Semantic heading structure
On this page