Maintenance screen
The screen of a service down on purpose: what is happening, when to come back, one button to check again.
import { MaintenanceScreen } from "@krizaka/ui/maintenance-screen";Web et mobile — le même composant pour React et React Native. Déprécié : conservé pour les apps qui l'utilisent encore, retiré à sa prochaine version majeure.
Pourquoi il est là. The web entry has no user (ADR-006 audit, 2026-10-25). The native `MaintenanceScreen`, used by mobile apps, stays.
Quand l’utiliser
- When the backend's parameters say maintenance is on.
- In place of the app, for the minutes the service is down.
Quand ne pas l’utiliser
- When something broke unexpectedly.À la place : Error page
- When the installed version is too old.À la place : Force update screen
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { MaintenanceScreen } from "@krizaka/ui/maintenance-screen";Exemples
Default
The title, the operator's message and “Try again”.
Props
The maintenance screen: announced politely, with one way to check again.
| Prop | Type | Défaut | Description |
|---|---|---|---|
titlerequis | ReactNode | — | The headline (“Back in a few minutes”). |
mark | ReactNode | — | The product's mark or mascot (decorative). |
message | ReactNode | — | What is happening — the backend's localized maintenance message. |
onRetry | (() => void) | — | Checks the backend again. |
retryLabel | string | — | The button that checks again (“Try again”). |
Accessibilité
- The title and message are a polite
status; the mark is decorative.
Bonnes pratiques
- Say what is happening and, if you know, when to come back.
- Keep “Try again”: the person decides when to check.
- Take the text from the backend's
maintenance.messageso the operator can write it.
Composants liés
Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub