---
title: "ConfirmDialog"
description: "The one question before something irreversible: Cancel is focused, the action is red, and a failure stays in the question. For the gravest actions, the person types the name first."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ConfirmDialog

## Delete

```tsx
import { useState } from 'react';
import { Button, ConfirmDialog } from '@arbol-ai/ui';

const DeleteExample = ({
  title = 'Delete Ana Torres?',
  confirmationText,
}: {
  title?: string;
  confirmationText?: string;
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, setIsPending] = useState(false);
  return (
    <>
      <Button
        onPress={() => {
          setIsOpen(true);
        }}
        variant="outline"
      >
        Delete
      </Button>
      <ConfirmDialog
        body="Their conversations stay; they stop receiving campaigns."
        confirmLabel="Delete"
        confirmationText={confirmationText}
        isOpen={isOpen}
        isPending={isPending}
        onConfirm={(close) => {
          setIsPending(true);
          setTimeout(() => {
            setIsPending(false);
            close();
          }, 1200);
        }}
        onOpenChange={setIsOpen}
        title={title}
      />
    </>
  );
};

<DeleteExample />
```

## Type to confirm

```tsx
import { useState } from 'react';
import { Button, ConfirmDialog } from '@arbol-ai/ui';

const DeleteExample = ({
  title = 'Delete Ana Torres?',
  confirmationText,
}: {
  title?: string;
  confirmationText?: string;
}) => {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, setIsPending] = useState(false);
  return (
    <>
      <Button
        onPress={() => {
          setIsOpen(true);
        }}
        variant="outline"
      >
        Delete
      </Button>
      <ConfirmDialog
        body="Their conversations stay; they stop receiving campaigns."
        confirmLabel="Delete"
        confirmationText={confirmationText}
        isOpen={isOpen}
        isPending={isPending}
        onConfirm={(close) => {
          setIsPending(true);
          setTimeout(() => {
            setIsPending(false);
            close();
          }, 1200);
        }}
        onOpenChange={setIsOpen}
        title={title}
      />
    </>
  );
};

<DeleteExample confirmationText="Front desk" title="Delete the Front desk agent?" />
```

## Source

The examples above are [`src/components/overlay/confirm-dialog.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/overlay/confirm-dialog.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/overlays/confirm-dialog/index.mdx