Action dialog

Route-backed dialog that can confirm closing when a nested form has unsaved changes.

Installation

bash

pnpm dlx shadcn@latest add @cs/action-dialog

Usage

tsx

import { ActionDialog } from "@/components/cs/action-dialog";

tsx

<ActionDialog
  labels={{
    confirmExit: "Leave this page?",
    areYouSure: "Your unsaved changes will be lost.",
    cancel: "Stay",
    exit: "Leave",
  }}
>
  <p>Dialog content</p>
</ActionDialog>

API Reference

useActionDialogContext

Returns the closest ActionDialog state bridge for nested forms.

ActionDialog

Dialog that confirms closing when a nested form has unsaved changes.

Props

Name	Type	Default	Description
children *	React.ReactNode	-	Dialog contents, usually a `Form`.
className	DialogContentProps["className"]	-	Additional dialog content classes.
labels	ActionDialogLabels	-	Text displayed by the close confirmation dialog.
position	DialogContentProps["position"]	-	Dialog placement on the screen.
preventClose	boolean	-	Prevents closing the dialog. Changed nested forms enable this automatically.
size	DialogContentProps["size"]	-	Maximum dialog width.

Dependencies

@cs/dialog @shadcn/utils @shadcn/dialog @shadcn/button