---
title: "DeleteDialog"
description: "The question before deleting a record for good: it names the record, says what deleting means, and Delete waits until the name is typed. Its words come in Spanish or English."
---

> 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.

# DeleteDialog

## Delete a contact

Type the name to enable Delete; the delete shows while it runs, then the question closes.

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

const DeleteContactExample = () => {
  const [isOpen, setIsOpen] = useState(false);
  const [isPending, setIsPending] = useState(false);
  return (
    <>
      <Button
        onPress={() => {
          setIsOpen(true);
        }}
        variant="outline"
      >
        Delete contact
      </Button>
      <DeleteDialog
        body="Their conversations stay; they stop receiving campaigns."
        isOpen={isOpen}
        isPending={isPending}
        name="Ana Torres"
        onDelete={(close) => {
          setIsPending(true);
          setTimeout(() => {
            setIsPending(false);
            close();
          }, 900);
        }}
        onOpenChange={setIsOpen}
      />
    </>
  );
};

<DeleteContactExample />
```

## Source

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

Source: https://epidermis.getarbol.com/components/blocks/delete-dialog/index.mdx