Confirm Action Alert Dialog
A dialog component for confirming destructive actions like delete operations, built on top of the Alert Dialog.
The Confirm Action Alert Dialog is a specialized dialog component built on top of the Alert Dialog that provides a consistent way to confirm potentially destructive or irreversible actions before they're executed.
It's particularly useful for:
- Deleting items (e.g., categories, posts, users)
- Performing actions that cannot be undone (e.g., clearing data, resetting settings)
- Confirming critical operations (e.g., account deletion, data migration)
- Any action where user confirmation is necessary to prevent accidental execution
Usage
import { ConfirmActionAlertDialog } from '@vitnode/core/components/confirm-action/confirm-action-alert-dialog';
import { Button } from '@vitnode/core/components/ui/button';<ConfirmActionAlertDialog
onSubmit={async ({ onClose }) => {
const result = await deleteCategoryApi(id);
if (result?.error) {
toast.error(tGlobal('errors.title'), {
description: tGlobal('errors.internal_server_error'),
});
return; // Keep dialog open on error
}
toast.success(t('success'), {
description: title,
});
onClose(); // Close dialog on success
}}
>
<Button variant="destructive">Delete Category</Button>
</ConfirmActionAlertDialog>Props
| Prop | Type | Default |
|---|---|---|
textSubmit? | string | Confirm |
description? | ReactNode | This action cannot be undone. |
title? | string | Are you sure? |
onSubmit | (params: { onClose: () => void }) => Promise<void> | - |
children | ReactNode | - |