Error page
When a page is not there: the code drawn huge, the bird that lost its way, one sentence, a search and the ways back — never a dead end.
Web only — React, from @krizaka/ui/error-page. Beta: its API may still change in a minor version.
Why it is here. Used by krizaka.com.
When to use
- Not found (404), server error (500), offline.
- Any page that cannot show what was asked.
When not to use
- For something not built yet.Use instead: Status page
- For an empty list inside a page.Use instead: Empty state
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { ErrorPage } from "@krizaka/ui/error-page";Examples
Not found
The pigeon, a search and three ways back.
This page took another road
The address may have changed. Search for it, or start again from one of these.
Props
An error page: the code drawn, the bird, a sentence, a search and the ways back.
| Prop | Type | Default | Description |
|---|---|---|---|
coderequired | string | — | The code (404, 500): drawn, not read — the title says it in words. |
titlerequired | ReactNode | — | The page's h1 (This page took another road). |
actions | ReactNode | — | The ways back (an ActionBar: home, the docs, contact). |
mascot | ReactNode | — | The bird beside the code (a Mascot in its empty or error mood). |
search | ReactNode | — | A search, to find what was meant. |
text | ReactNode | — | What happened and what to do, in one or two sentences. |
Accessibility
- The code is hidden from assistive technology; the
h1says what happened. - The ways back are a named list of links.
Best practices
- The title says it in words; the code is drawn, not read.
- Offer a search and two or three ways back.
- Words and content arrive as props; the motion is the platform's (
[data-reveal], still under reduced motion).
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub