ConfirmDialog

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

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?" />