ActionModal

The ActionModal component provides a pre-styled modal for confirmation actions with various types.

Import

import { ActionModal } from "amvasdev-ui";

Examples

Success Modal

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

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

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

        {isOpen && (
          <ActionModal
            type="success"
            title="Success!"
            description="Your action was completed successfully."
            onConfirm={() => setIsOpen(false)}
            closeModal={() => setIsOpen(false)}
            showClose={true}
          />
        )}
      </>
    );
  }

Warning Modal

<ActionModal
  type="warning"
  title="Are you sure?"
  description="This action cannot be undone."
  onConfirm={handleDelete}
  confirmButtonText="Delete"
  cancelButtonText="Cancel"
  showCancelButton={true}
  onCancel={() => setIsOpen(false)}
  closeModal={() => setIsOpen(false)}
/>

Error Modal with Loading

<ActionModal
  type="error"
  title="Error occurred"
  description="Failed to complete the operation."
  onConfirm={handleRetry}
  isPending={isLoading}
  confirmButtonText="Retry"
  showCancelButton={true}
  closeModal={() => setIsOpen(false)}
/>

Notes

  • Available types: success, warning, info, error