Error Pages
404, 500, and maintenance page layouts for error handling.
404 Not Found
Clean 404 page with headline, description, and home/back actions.
Preview
Page not found
Sorry, we couldn't find the page you're looking for. It may have been moved or deleted.
404 Not Found.tsx
import { NotFound } from "@launchapp/design-system/blocks/errors";import Link from "next/link";export default function NotFoundPage() { return ( <NotFound homeAction={<Link href="/">Go home</Link>} backAction={<button type="button" onClick={() => history.back()}>Go back</button>} /> );}500 Server Error
Server error page with retry action and support contact.
Preview
No preview available
See the code snippet below for usage.
500 Server Error.tsx
import { ServerError } from "@launchapp/design-system/blocks/errors";export default function ErrorPage() { return ( <ServerError onRetry={() => window.location.reload()} /> );}Maintenance Page
Maintenance mode page with status message and estimated return time.
Preview
No preview available
See the code snippet below for usage.
Maintenance Page.tsx
import { Maintenance } from "@launchapp/design-system/blocks/errors";export default function MaintenancePage() { return ( <Maintenance title="We'll be back soon" description="We're performing scheduled maintenance. Estimated downtime: 30 minutes." estimatedReturn="2024-01-01T15:00:00Z" /> );}