Update prompt

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

Web · ✓Mobile · ✓Desktop · ✓DeprecatedFeedback

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 and mobile — the same component for React and React Native. Deprecated: kept for the apps that still use it, removed in its next major.

Why it is here. The web entry has no user (ADR-006 audit, 2026-10-25). The native `UpdatePrompt`, used by three mobile apps, stays.

DeprecatedSince 3.55.0, removed in 4.0.0. The web entry has no user (ADR-006 audit, 2026-10-25). The native `UpdatePrompt`, used by three mobile apps, stays.

When to use

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.

When not to use

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

Installation

Install

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

Styles

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

Import

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

Examples

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	Default	Description
`laterLabel`required	`string`	—	The way out (“Later”).
`onLater`required	`() => void`	—	Called by the way out: the hook remembers it for this version.
`onUpdate`required	`() => void`	—	Opens the store page, or reloads the app on the new version.
`title`required	`ReactNode`	—	The headline (“A new version is available”).
`updateLabel`required	`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”).

Accessibility

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

Best practices

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

Generated from the code of @krizaka/ui 3.63.1: its meta.ts, its examples and its types.Edit this documentation on GitHub