ConfirmDialog

Convenience wrapper around AlertDialog for confirmation flows

Default

Usage

import { ConfirmDialog } from '@tryvienna/ui'

<ConfirmDialog
  trigger={<Button variant="destructive">Delete Item</Button>}
  title="Delete this item?"
  description="This action cannot be undone. The item and all associated data will be permanently removed."
  confirmLabel="Delete"
  variant="destructive"
  onConfirm={() => alert('Item deleted!')}
/>

Examples

Default

Default

<ConfirmDialog
  trigger={<Button variant="destructive">Delete Item</Button>}
  title="Delete this item?"
  description="This action cannot be undone. The item and all associated data will be permanently removed."
  confirmLabel="Delete"
  variant="destructive"
  onConfirm={() => alert('Item deleted!')}
/>

Non Destructive

Non Destructive

<ConfirmDialog
  trigger={<Button variant="outline">Save Changes</Button>}
  title="Save changes?"
  description="Your changes will be saved and applied immediately."
  confirmLabel="Save"
  variant="default"
  onConfirm={() => alert('Changes saved!')}
/>

Controlled

Controlled

<div className="flex flex-col items-center gap-4">
  <Button onClick={() => setOpen(true)}>Open Confirm Dialog</Button>
  <ConfirmDialog
    open={open}
    onOpenChange={setOpen}
    title="Discard draft?"
    description="You have unsaved changes. Are you sure you want to discard them?"
    confirmLabel="Discard"
    cancelLabel="Keep Editing"
    variant="destructive"
    onConfirm={() => {
      alert('Draft discarded!');
      setOpen(false);
    }}
    onCancel={() => setOpen(false)}
  />
  <p className="text-xs text-muted-foreground">
    Dialog is controlled via state: {open ? 'open' : 'closed'}
  </p>
</div>

Custom Labels

Custom Labels

<ConfirmDialog
  trigger={<Button variant="outline">Archive Project</Button>}
  title="Archive this project?"
  description="The project will be moved to the archive. You can restore it later from the archive page."
  confirmLabel="Yes, Archive"
  cancelLabel="No, Keep Active"
  variant="default"
  onConfirm={() => alert('Project archived!')}
/>

API Reference

ConfirmDialog

Prop	Type	Default	Description
open	boolean	-
onOpenChange	(open: boolean) => void	-
trigger	React.ReactNode	-
title	string	-
description	string	-
confirmLabel	string	-
cancelLabel	string	-
variant	'default' | 'destructive'	-
onConfirm	() => void | Promise<void>	-
onCancel	() => void	-
size	'default' | 'sm'	-

Data Attributes

Component	data-slot
ConfirmDialog	"confirm-dialog"