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