Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProThe three-way dialog for leaving an editor with unsaved changes (Keep editing, Discard, Save and leave) where a failed save stays on screen with its error.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use this when closing, navigating away from or switching away from a form with unsaved edits. It offers all three real choices instead of a two-button prompt that forces a loss.
Do not show it when nothing changed. Do not use it for autosaving editors, where leaving is always safe.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
open / onOpenChange | boolean / fn | - | Controlled state. |
onSave | () => void | Promise<void> | - | Saves; a rejection keeps the dialog open and shows its message. |
onDiscard | () => void | - | Leave without saving. |
title, description | ReactNode | - | Dialog text. |
role="alert" message and the dialog stays open; the dialog cannot be dismissed while saving.open), so you decide when to show it: on route change, on close button, on beforeunload.| Key | Action |
|---|---|
| Tab | Keep editing, Discard, Save and leave |
| Escape | keeps editing |
The pattern ships a Testing Library test (confirm-unsaved-changes.test.tsx) that covers the three choices, keeping editing, discarding, saving and a failed save.