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 uniquement — React, depuis @krizaka/ui/error-page. Bêta : son API peut encore changer à une version mineure.
Pourquoi il est là. Used by krizaka.com.
Quand l’utiliser
- Not found (404), server error (500), offline.
- Any page that cannot show what was asked.
Quand ne pas l’utiliser
- For something not built yet.À la place : Status page
- For an empty list inside a page.À la place : Empty state
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { ErrorPage } from "@krizaka/ui/error-page";Exemples
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 | Défaut | Description |
|---|---|---|---|
coderequis | string | — | The code (404, 500): drawn, not read — the title says it in words. |
titlerequis | 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. |
Accessibilité
- The code is hidden from assistive technology; the
h1says what happened. - The ways back are a named list of links.
Bonnes pratiques
- 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).
Composants liés
Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub