Confirm Dialog

A focused confirmation dialog for destructive, warning, and irreversible ZGI workspace actions.

No destructive action taken.

"use client"

import { useState } from "react"
import { Trash2Icon } from "lucide-react"

import { Button } from "@/components/ui/button"
import { ConfirmDialog } from "@/components/ui/confirm-dialog"

export function ConfirmDialogDemo() {
  const [deleted, setDeleted] = useState(false)

  return (
    <div className="flex min-h-[220px] w-full flex-col items-center justify-center gap-4">
      <ConfirmDialog
        variant="danger"
        title="Delete workflow draft?"
        description="This removes the local ZGI workflow draft from this workspace. Published versions stay available."
        confirmText="Delete draft"
        cancelText="Keep draft"
        onConfirm={() => setDeleted(true)}
        trigger={
          <Button variant="outline" className="gap-2">
            <Trash2Icon />
            Delete draft
          </Button>
        }
      />
      <p className="text-muted-foreground h-5 text-sm">
        {deleted
          ? "Draft removed from this workspace."
          : "No destructive action taken."}
      </p>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add https://ui.zgi.ai/r/confirm-dialog.json

Usage

import { ConfirmDialog } from "@/components/ui/confirm-dialog"

<ConfirmDialog
  variant="danger"
  title="Delete workflow draft?"
  description="This removes the local draft from the workspace."
  confirmText="Delete draft"
  cancelText="Keep draft"
  onConfirm={() => deleteDraft()}
  trigger={<Button variant="outline">Delete draft</Button>}
/>

API Reference

Prop	Type	Description
trigger	`ReactNode`	Optional element that opens the dialog
title	`ReactNode`	Dialog title
description	`ReactNode`	Supporting confirmation copy
confirmText	`string`	Confirm button label
cancelText	`string`	Cancel button label
onConfirm	`() => void \| Promise<void>`	Runs when the user confirms
loading	`boolean`	Controlled loading state
open	`boolean`	Controlled open state
onOpenChange	`(open: boolean) => void`	Controlled open handler
variant	`"default" \| "warning" \| "danger"`	Action severity

Condition Builder Conversation

On This Page

Installation Usage API Reference

Deploy and Scale Agents with ZGI

ZGI delivers the infrastructure and developer experience you need to ship reliable audio & agent applications at scale.