DeleteDialog | Arbol UI

Language

Appearance

Delete a contact

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

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, which the library’s tests render too.