Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn edit dialog whose Delete asks for its own confirmation in a second dialog on top, where Escape closes only the top one and confirming closes both.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for edit screens with a destructive action next to Save: webhooks, API keys, integrations. The edit stays visible behind the question, which reminds people what they are deleting.
Do not use it when the edit dialog has nothing to lose (a plain confirm is enough), and do not nest a third level. For a styled stacked look use the nested-dialog component.
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 |
|---|---|---|---|
trigger | ReactNode | - | Opens the edit dialog. |
title, description | ReactNode | - | Edit dialog text. |
onSave, onDelete | () => void | - | Handlers. |
deleteLabel, deleteTitle, deleteDescription | string / ReactNode | Delete, Delete this item?, This cannot be undone. | Text of the delete button and the confirmation. |
children | ReactNode | - | The form. |
| Key | Action |
|---|---|
| Escape | closes the top dialog only |
| Tab | stays inside the top dialog |
The pattern ships a Testing Library test (dialog-stacked-confirm.test.tsx) that covers stacking, Escape closing only the top layer with focus return, confirming both and saving.