diff --git a/components/elements/Alert.tsx b/components/elements/Alert.tsx
index 0661c8363..0e16bc08f 100644
--- a/components/elements/Alert.tsx
+++ b/components/elements/Alert.tsx
@@ -3,8 +3,6 @@ import { DirectionType, SeverityType } from "../types/commonTypes";
 import { Button } from "./Button";
 import { cn } from "../util";
 
-// TODO: make handleClose to detect when the alert is closed from outside this component
-
 type AlertTypes = {
   severity?: SeverityType | "hyper" | "oceanic";
   /** The title of the alert placed above the text of the alert. Can be used alone */
@@ -37,6 +35,7 @@ type AlertTypes = {
   persistent?: boolean;
   icon?: any;
   className?: any;
+  onAlertClosed?: any;
 };
 
 export const Alert: React.FunctionComponent<AlertTypes> = ({
@@ -162,6 +161,7 @@ export const Alert: React.FunctionComponent<AlertTypes> = ({
               direction === "rtl" ? "hawa-left-2" : "hawa-right-2"
             )}
             onClick={() => {
+              props.onAlertClosed();
               setClosed(true);
               setTimeout(() => {
                 if (alertRef?.current) {
diff --git a/stories/ElementsStories/Alert.stories.tsx b/stories/ElementsStories/Alert.stories.tsx
index 9c6f470e8..8fa78b8b7 100644
--- a/stories/ElementsStories/Alert.stories.tsx
+++ b/stories/ElementsStories/Alert.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Alert } from "../../components/elements";
-import { ArgsTable, Story, Title } from "@storybook/blocks";
+import { ArgsTable, Story } from "@storybook/blocks";
 import { setLocale, t } from "../translations/i18n";
 
 const meta = {