Alert Dialog

import { AlertDialog } from "css-materials";

const [isDialogOpen, setIsDialogOpen] = useState(false);

return (
    <>
        <AlertDialog
            isOpen={isDialogOpen}
            onClose={handleDialogClose}
            title="Unsaved Changes"
            message="You have unsaved changes. Are you sure you want to leave without saving?"
        />
    </>
)

const [isDialogOpen, setIsDialogOpen] = useState(false);

return (
    <>
        <AlertDialog
            isOpen={isDialogOpen}
            onClose={handleDialogClose}
            title="New Idea"
            message="You have a brilliant new idea to review."
            confirmText='Review Now'
            cancelText='Later'
        />
    </>
)

const [isDialogOpen, setIsDialogOpen] = useState(false);

const showAlert = () => alert("The Delete button has been clicked!");

return (
    <>
        <AlertDialog
            isOpen={isDialogOpen}
            onClose={handleDialogClose}
            title="Delete Item"
            message="Are you sure you want to delete this item? This action cannot be undone."
            confirmText='Delete'
            cancelText='Cancel'
            onConfirm={showAlert}
        />
    </>
)