Modal

The Modal component displays content in a dialog.

Importing the Modal Component

To use the Modal component in our app, we need to import it from our styled components. Here’s how we can import it:

import { Modal } from "StyledComponents";

Using the Modal Component

The Modal component can be used with various props to control its appearance. Here is an example of how we can use it:

<Modal
  isOpen={true}
  onClose={() => setShowDeleteDialog(false)}
>
  <div className="mb-8 mt-4 flex-col">
    <h6 className="mb-2 text-2xl font-bold">Delete Invoice</h6>
    <p className="mt-2 font-normal">
      Are you sure you want to delete this invoice?
      <b className="font-bold" /> This action cannot be reversed.
    </p>
  </div>
  <div className="flex justify-between">
    <Button
      className="mr-2 w-1/2"
      size="medium"
      style="secondary"
      onClick={}
    >
      CANCEL
    </Button>
    <Button
      className="ml-2 w-1/2"
      size="medium"
      style="primary"
      onClick={}
    >
      DELETE
    </Button>
  </div>
</Modal>

Modal Component Props