Update prompt

The soft invitation to update: a banner the person can dismiss, with the versions and one button to the store.

Web · ✓Mobile · ✓Bureau · ✓DépréciéRetours

import { UpdatePrompt } from "@krizaka/ui/update-prompt";

A new version is available

Faster chats and a fix for uploads on slow networks.

1.2.0 → 1.4.0

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 `UpdatePrompt`, used by three 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 `UpdatePrompt`, used by three mobile apps, stays.

Quand l’utiliser

When the backend says updateMode: soft: a newer version exists but the installed one still works.
Once per version: after “Later”, the app does not ask again until the next release.

Quand ne pas l’utiliser

When the installed version can no longer work: block it.À la place : Force update screen
For a message that is not about the app's version.À la place : Alert

Installation

Installer

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

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { UpdatePrompt } from "@krizaka/ui/update-prompt";

Exemples

Default

A banner with the versions, “Later” and “Update”.

A new version is available

Faster chats and a fix for uploads on slow networks.

1.2.0 → 1.4.0

Props

The soft update: an invitation that can be dismissed, announced politely.

Prop	Type	Défaut	Description
`laterLabel`requis	`string`	—	The way out (“Later”).
`onLater`requis	`() => void`	—	Called by the way out: the hook remembers it for this version.
`onUpdate`requis	`() => void`	—	Opens the store page, or reloads the app on the new version.
`title`requis	`ReactNode`	—	The headline (“A new version is available”).
`updateLabel`requis	`string`	—	The button that updates (“Update”).
`mark`	`ReactNode`	—	The product's mark (decorative), e.g. `<OrazakaLogo />`.
`message`	`ReactNode`	—	Why update, in a sentence — the backend's localized `message`.
`versionLabel`	`ReactNode`	—	The versions, in words and mono (“1.2.0 → 1.4.0”).

Accessibilité

A labelled region, read in order; the mark is decorative.
Both buttons are reachable by keyboard and have visible names.

Bonnes pratiques

Say what the update brings in one sentence (the backend's localized message), not a version number alone.
Never show it over a task in progress: on the home screen or at launch.
Remember the dismissal per latestVersion (useAppConfig does).

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