NotFoundPage
Full-page 404 view with a heading, supporting copy, and a primary call-to-action back to safety.
Full-page 404 view with a heading, supporting copy, and a primary call-to-action back to safety.
import { NotFoundPage } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
onGoHome | Optional | VoidFunction | undefined | — | Callback fired when the "Go Home" button is clicked |
title | Optional | string | undefined | "404" | Page title |
message | Optional | string | undefined | "The page you are looking for does not exist." | Message displayed below the title |
className | Optional | string | undefined | — | Additional CSS class name |
Usage
A full-page 404 "not found" screen with a customizable title, message, and optional "Go Home" button.
Notes
- When
onGoHomeis omitted the button is not rendered, giving a read-only display.
Example
/** * Runnable example for NotFoundPage. */import { NotFoundPage } from '@tetherto/mdk-react-devkit'export const NotFoundPageExample = () => ( <div className="mdk-example-row" style={{ display: 'flex', flexDirection: 'column', gap: 32 }}> {/* Default 404 with Go Home button */} <NotFoundPage onGoHome={() => { /* navigate home */ }} /> {/* Custom title and message */} <NotFoundPage title="Page Not Found" message="Check the URL and try again." onGoHome={() => { /* navigate home */ }} /> {/* No button (read-only display) */} <NotFoundPage title="403" message="You do not have permission to view this page." /> </div>)