Add a Confirm to Delete Button in Chakra UI using Typescript

Create a new component called ConfirmButton.tsx

import { Box } from "@chakra-ui/layout";
import {
  Button,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  useDisclosure,
} from "@chakra-ui/react";
import React from "react";

interface ConfirmButtonProps {
  onSuccessAction: () => void;
  headerText: string;
  bodyText: string;
  buttonText: string;
  isDanger?: boolean;
}

const ConfirmButton = ({
  onSuccessAction,
  buttonText,
  headerText,
  bodyText,
  isDanger,
}: ConfirmButtonProps) => {
  const { isOpen, onOpen, onClose } = useDisclosure();

  const onSubmit = () => {
    onSuccessAction();
    onClose();
  };

  return (
    <>
      <Button onClick={onOpen} colorScheme={isDanger ? "red" : ""}>
        {buttonText}
      </Button>

      <Modal isOpen={isOpen} onClose={onClose}>
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>{headerText}</ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <Box>{bodyText}</Box>
          </ModalBody>

          <ModalFooter>
            <Button variant="ghost" onClick={onClose} mr={3}>
              Close
            </Button>
            <Button colorScheme={isDanger ? "red" : ""} onClick={onSubmit}>
              {buttonText}
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
};
export default ConfirmButton;

Use it in your React component like:

import ConfirmButton from "./confirm";

<ConfirmButton
              headerText="Delete this message?"
              bodyText="Are you sure you want to delete this message? This cannot be undone."
              onSuccessAction={() => {
                console.log("Successfully Deleted");
              }}
              buttonText="Delete"
              isDanger={true}
            />