Alert Dialog

import { useState } from 'react'
import { AlertDialog } from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'

function DeleteButton() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button variant="destructive" onClick={() => setOpen(true)}>
        Delete Account
      </Button>

      <AlertDialog
        open={open}
        onOpenChange={setOpen}
        title="Delete Account"
        description="This will permanently delete your account. This action cannot be undone."
        variant="danger"
        confirmText="Delete"
        cancelText="Cancel"
        onConfirm={() => {
          console.log('Deleted')
          setOpen(false)
        }}
      />
    </>
  )
}

// With loading state
const [loading, setLoading] = useState(false)

<AlertDialog
  open={open}
  onOpenChange={setOpen}
  title="Processing..."
  description="Please wait while we process your request."
  variant="info"
  loading={loading}
  onConfirm={() => {
    setLoading(true)
    // Async operation
    setTimeout(() => {
      setLoading(false)
      setOpen(false)
    }, 2000)
  }}
/>