Layout

ErrorPage

A full-page error state for 404, 403, 500 and 503 with localized copy and home and back actions.

<!-- src/routes/+error.svelte -->
<script>
  import { page } from "$app/state";
  import { ErrorPage } from "@codeatlasdev/ui";
</script>

<ErrorPage status={page.status} message={page.error?.message} />

Known statuses (404, 403, 500, 503) get an icon, a title and a hint in the active locale. Any other status falls back to a generic title. An explicit message replaces the hint and title replaces the title. The actions go back in history and to /. caErrorPlugin({ scaffold: true }) writes a +error.svelte like this one for you (see Installation).

#172

404 without actions

hideActions removes the back and home buttons.

404

Page not found

The page you're looking for doesn't exist or was moved.

Reference #172 · Pick in the gallery

Code

<script lang="ts">
  import { ErrorPage } from '@codeatlasdev/ui';
</script>

<ErrorPage status={404} hideActions />

Props

Prop	Type	Default	Description
`status`	`number`	`500`	HTTP status shown as the large number. Picks the icon, title and hint for 404, 403, 500 and 503.
`message`	`string`	–	Replaces the preset hint under the title.
`title`	`string`	–	Replaces the preset title.
`hideActions`	`boolean`	`false`	Hides the back and home buttons.
`class`	`string`	`''`	Extra classes on the root.