Confirm Action Alert Dialog
A ready-made Alert Dialog that confirms deletes and other irreversible actions, with a loading state and error handling built in.
An Alert Dialog with the boring parts done: async submit, spinner, locked Cancel, and a dialog that stays open when things fail.
Preview
Usage
import { ConfirmActionAlertDialog } from '@vitnode/core/components/confirm-action/confirm-action-alert-dialog'
import { Button } from '@vitnode/core/components/ui/button'<ConfirmActionAlertDialog
icon={<Trash2Icon />}
onSubmit={async ({ onClose }) => {
await deleteCategory(id)
onClose()
}}
title="Delete General discussion?"
>
<Button variant="destructive">Delete category</Button>
</ConfirmActionAlertDialog>The child becomes the trigger. Passing an icon switches to the compact,
centered layout.
Async and errors
While onSubmit runs, the confirm button spins and Cancel is locked. Nothing
closes until you call onClose(), so on an error just show a toast and return.
onSubmit={async ({ onClose }) => {
const result = await deleteCategoryApi(id)
if (result?.error) {
toast.error(tGlobal('errors.title'), {
description: tGlobal('errors.internal_server_error'),
})
return
}
toast.success(t('success'), { description: title })
onClose()
}}Props
Prop
Type
It also takes every AlertDialog prop, such as open and onOpenChange.
Default texts are translated.