diff --git a/awx/ui/src/components/JobCancelButton/JobCancelButton.js b/awx/ui/src/components/JobCancelButton/JobCancelButton.js
index 30bea62eab..eec42b4241 100644
--- a/awx/ui/src/components/JobCancelButton/JobCancelButton.js
+++ b/awx/ui/src/components/JobCancelButton/JobCancelButton.js
@@ -18,13 +18,18 @@ function JobCancelButton({
   isDisabled,
   tooltip,
   cancelationMessage,
+  onCancelWorkflow,
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const { error: cancelError, request: cancelJob } = useRequest(
     useCallback(async () => {
       setIsOpen(false);
       await getJobModel(job.type).cancel(job.id);
-    }, [job.id, job.type]),
+
+      if (onCancelWorkflow) {
+        onCancelWorkflow();
+      }
+    }, [job.id, job.type, onCancelWorkflow]),
     {}
   );
   const { error, dismissError: dismissCancelError } =
diff --git a/awx/ui/src/screens/WorkflowApproval/WorkflowApprovalDetail/WorkflowApprovalDetail.js b/awx/ui/src/screens/WorkflowApproval/WorkflowApprovalDetail/WorkflowApprovalDetail.js
index 75dd963b3a..be2987221f 100644
--- a/awx/ui/src/screens/WorkflowApproval/WorkflowApprovalDetail/WorkflowApprovalDetail.js
+++ b/awx/ui/src/screens/WorkflowApproval/WorkflowApprovalDetail/WorkflowApprovalDetail.js
@@ -313,6 +313,12 @@ function WorkflowApprovalDetail({ workflowApproval, fetchWorkflowApproval }) {
                 onHandleToast={handleToast}
               />
               <JobCancelButton
+                onCancelWorkflow={() =>
+                  handleToast(
+                    workflowApproval.summary_fields.source_workflow_job.id,
+                    'Workflow Cancelled '
+                  )
+                }
                 title={t`Cancel Workflow`}
                 job={{
                   ...workflowApproval.summary_fields.source_workflow_job,