Krizaka UI
Krizaka UI
Composants

Maintenance screen

The screen of a service down on purpose: what is happening, when to come back, one button to check again.

Web · ✓Mobile · ✓Bureau · ✓DépréciéRetours
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.

DépréciéDepuis 3.55.0, retiré en 4.0.0. 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

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@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.

PropTypeDéfautDescription
titlerequisReactNode—The headline (“Back in a few minutes”).
markReactNode—The product's mark or mascot (decorative).
messageReactNode—What is happening — the backend's localized maintenance message.
onRetry(() => void)—Checks the backend again.
retryLabelstring—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.message so the operator can write it.

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

Sur cette page