Modal

The Modal component provides a flexible dialog with customizable close behavior and action buttons.

Import

import { Modal } from "amvasdev-ui";

Examples

Basic Modal

import { useState } from "react";
  import { Button, Modal } from "amvasdev-ui";

  function App() {
    const [isOpen, setIsOpen] = useState(false);

    return (
      <>
        <Button variant="primary" onClick={() => setIsOpen(true)}>
          Open Modal
        </Button>

        {isOpen && (
          <Modal
            onClose={() => setIsOpen(false)}
            title="Confirmation"
            closeOnClickOutside={true}
            closeOnEsc={true}
            showCloseButton={true}
            confirmButton={{
              children: "Confirm",
              variant: "primary",
              onClick: () => setIsOpen(false),
            }}
            closeOnConfirm={true}
          >
            <p>Are you sure you want to continue?</p>
          </Modal>
        )}
      </>
    );
  }

Modal with Action Buttons

<Modal
  onClose={() => setIsOpen(false)}
  title="Delete Item"
  cancelButton={{
    children: "Cancel",
    variant: "ghost",
  }}
  confirmButton={{
    children: "Delete",
    variant: "error",
    onClick: () => setIsOpen(false),
  }}
  closeOnCancel={true}
  closeOnConfirm={true}
>
  <p>This action cannot be undone.</p>
</Modal>