diff --git a/README.md b/README.md
index 60a9631..fdc2b04 100644
--- a/README.md
+++ b/README.md
@@ -117,7 +117,7 @@ props details:
         </tr>
         <tr>
           <td>closable</td>
-          <td>Boolean</td>
+          <td>Boolean | { closeIcon: ReactNode, onClose: VoidFunction }</td>
           <td></td>
           <td>whether show close button</td>
         </tr>
diff --git a/src/Notifications.tsx b/src/Notifications.tsx
index f990764..04f6847 100644
--- a/src/Notifications.tsx
+++ b/src/Notifications.tsx
@@ -45,8 +45,11 @@ const Notifications = React.forwardRef<NotificationsRef, NotificationsProps>((pr
   const onNoticeClose = (key: React.Key) => {
     // Trigger close event
     const config = configList.find((item) => item.key === key);
+    const closable = config?.closable;
+    const closableObj = closable && typeof closable === 'object' ? closable : {};
+    const { onClose: closableOnClose } = closableObj;
+    closableOnClose?.();
     config?.onClose?.();
-
     setConfigList((list) => list.filter((item) => item.key !== key));
   };
 
diff --git a/src/hooks/useNotification.tsx b/src/hooks/useNotification.tsx
index a7940ff..2072839 100644
--- a/src/hooks/useNotification.tsx
+++ b/src/hooks/useNotification.tsx
@@ -15,7 +15,9 @@ export interface NotificationConfig {
   getContainer?: () => HTMLElement | ShadowRoot;
   motion?: CSSMotionProps | ((placement: Placement) => CSSMotionProps);
 
-  closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
+  closable?:
+    | boolean
+    | ({ closeIcon?: React.ReactNode; onClose?: VoidFunction } & React.AriaAttributes);
   maxCount?: number;
   duration?: number;
   showProgress?: boolean;
diff --git a/src/interface.ts b/src/interface.ts
index ce36f2e..1a5727d 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -10,7 +10,9 @@ export interface NoticeConfig {
   showProgress?: boolean;
   pauseOnHover?: boolean;
 
-  closable?: boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes);
+  closable?:
+    | boolean
+    | ({ closeIcon?: React.ReactNode; onClose?: VoidFunction } & React.AriaAttributes);
   className?: string;
   style?: React.CSSProperties;
   classNames?: {
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 3fb2e60..05b302b 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -778,6 +778,104 @@ describe('Notification.Basic', () => {
     unmount();
   });
 
+  describe('onClose and closable.onClose', () => {
+    it('onClose', () => {
+      const onClose = vi.fn();
+      const Demo = () => {
+        const [api, holder] = useNotification();
+        return (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                api.open({
+                  key: 'little',
+                  duration: 1,
+                  content: <div className="context-content">light</div>,
+                  closable: { onClose },
+                });
+              }}
+            />
+            {holder}
+          </>
+        );
+      };
+
+      const { container: demoContainer, unmount } = render(<Demo />);
+      fireEvent.click(demoContainer.querySelector('button'));
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(onClose).toHaveBeenCalled();
+
+      unmount();
+    });
+    it('Both closableOnllose and onClose are called', () => {
+      const onClose = vi.fn();
+      const closableOnClose = vi.fn();
+      const Demo = () => {
+        const [api, holder] = useNotification();
+        return (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                api.open({
+                  key: 'little',
+                  duration: 1,
+                  content: <div className="context-content">light</div>,
+                  onClose,
+                  closable: { onClose: closableOnClose },
+                });
+              }}
+            />
+            {holder}
+          </>
+        );
+      };
+
+      const { container: demoContainer, unmount } = render(<Demo />);
+      fireEvent.click(demoContainer.querySelector('button'));
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(closableOnClose).toHaveBeenCalled();
+      expect(onClose).toHaveBeenCalled();
+
+      unmount();
+    });
+    it('closable.onClose (config)', () => {
+      const onClose = vi.fn();
+      const Demo = () => {
+        const [api, holder] = useNotification({ closable: { onClose } });
+        return (
+          <>
+            <button
+              type="button"
+              onClick={() => {
+                api.open({
+                  key: 'little',
+                  duration: 1,
+                  content: <div className="context-content">light</div>,
+                });
+              }}
+            />
+            {holder}
+          </>
+        );
+      };
+
+      const { container: demoContainer, unmount } = render(<Demo />);
+      fireEvent.click(demoContainer.querySelector('button'));
+      act(() => {
+        vi.runAllTimers();
+      });
+      expect(onClose).toHaveBeenCalled();
+
+      unmount();
+    });
+  });
+
   it('closes via keyboard Enter key', () => {
     const { instance } = renderDemo();
     let closeCount = 0;