diff --git a/packages/compass-components/src/hooks/use-confirmation.spec.tsx b/packages/compass-components/src/hooks/use-confirmation.spec.tsx
index 84f57b6852a..15b436401d1 100644
--- a/packages/compass-components/src/hooks/use-confirmation.spec.tsx
+++ b/packages/compass-components/src/hooks/use-confirmation.spec.tsx
@@ -1,5 +1,4 @@
 import {
-  cleanup,
   render,
   screen,
   waitFor,
@@ -10,85 +9,30 @@ import {
 import { expect } from 'chai';
 import React from 'react';
 
-import {
-  ConfirmationModalArea,
-  useConfirmationModal,
-  showConfirmation,
-} from './use-confirmation';
-
-const OpenConfirmationModalButton = () => {
-  const { showConfirmation } = useConfirmationModal();
-  return (
-    <button
-      type="button"
-      onClick={() =>
-        void showConfirmation({
-          title: 'Are you sure?',
-          description: 'This action can not be undone.',
-          buttonText: 'Yes',
-        })
-      }
-    >
-      Open Modal
-    </button>
-  );
-};
+import { ConfirmationModalArea, showConfirmation } from './use-confirmation';
 
 describe('use-confirmation', function () {
-  afterEach(cleanup);
-
-  context('useConfirmationModal hook', function () {
-    let modal: HTMLElement;
-    beforeEach(function () {
-      render(
-        <ConfirmationModalArea>
-          <OpenConfirmationModalButton />
-        </ConfirmationModalArea>
-      );
-
-      userEvent.click(screen.getByText('Open Modal'));
-      modal = screen.getByTestId('confirmation-modal');
-      expect(modal).to.exist;
-    });
-
-    it('renders modal contents', function () {
-      expect(within(modal).getByText('Are you sure?')).to.exist;
-      expect(
-        within(modal).getByText('This action can not be undone.')
-      ).to.exist;
-      expect(within(modal).getByText('Yes')).to.exist;
-      expect(within(modal).getByText('Cancel')).to.exist;
-    });
-
-    it('handles cancel action', async function () {
-      userEvent.click(within(modal).getByText('Cancel'));
-      await waitForElementToBeRemoved(() =>
-        screen.getByTestId('confirmation-modal')
-      );
-    });
-
-    it('handles confirm action', async function () {
-      userEvent.click(within(modal).getByText('Yes'));
-      await waitForElementToBeRemoved(() =>
-        screen.getByTestId('confirmation-modal')
-      );
-    });
-  });
-
   context('showConfirmation global function', function () {
     let modal: HTMLElement;
     let response: Promise<boolean>;
     beforeEach(async function () {
       render(
         <ConfirmationModalArea>
-          <div />
+          <button
+            type="button"
+            onClick={() => {
+              response = showConfirmation({
+                title: 'Are you sure?',
+                description: 'This action can not be undone.',
+                buttonText: 'Yes',
+              });
+            }}
+          >
+            Open Modal
+          </button>
         </ConfirmationModalArea>
       );
-      response = showConfirmation({
-        title: 'Are you sure?',
-        description: 'This action can not be undone.',
-        buttonText: 'Yes',
-      });
+      userEvent.click(screen.getByText('Open Modal'));
       await waitFor(() => {
         modal = screen.getByTestId('confirmation-modal');
       });
@@ -105,12 +49,18 @@ describe('use-confirmation', function () {
 
     it('handles cancel action', async function () {
       userEvent.click(within(modal).getByText('Cancel'));
+      await waitForElementToBeRemoved(() =>
+        screen.getByTestId('confirmation-modal')
+      );
       const confirmed = await response;
       expect(confirmed).to.be.false;
     });
 
     it('handles confirm action', async function () {
       userEvent.click(within(modal).getByText('Yes'));
+      await waitForElementToBeRemoved(() =>
+        screen.getByTestId('confirmation-modal')
+      );
       const confirmed = await response;
       expect(confirmed).to.be.true;
     });
diff --git a/packages/compass-components/src/hooks/use-confirmation.tsx b/packages/compass-components/src/hooks/use-confirmation.tsx
index 1fd30fd1bfa..0a4b0727cff 100644
--- a/packages/compass-components/src/hooks/use-confirmation.tsx
+++ b/packages/compass-components/src/hooks/use-confirmation.tsx
@@ -1,4 +1,10 @@
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { Variant as ConfirmationModalVariant } from '@leafygreen-ui/confirmation-modal';
 import ConfirmationModal from '../components/modals/confirmation-modal';
 import { css } from '@leafygreen-ui/emotion';
@@ -22,125 +28,100 @@ type ConfirmationProperties = Partial<
 
 type ConfirmationCallback = (value: boolean) => void;
 
-interface ConfirmationModalContextData {
-  showConfirmation: (props: ConfirmationProperties) => Promise<boolean>;
-  isMounted: boolean;
-}
-
-type ShowConfirmationEventDetail = {
-  props: ConfirmationProperties & { confirmationId: number };
+type OnShowConfirmationProperties = {
+  props: ConfirmationProperties;
   resolve: ConfirmationCallback;
   reject: (err?: any) => void;
+  confirmationId: number;
 };
 
-interface ConfirmationEventMap {
-  'show-confirmation': CustomEvent<ShowConfirmationEventDetail>;
-}
-
-interface GlobalConfirmation extends EventTarget {
-  addEventListener<K extends keyof ConfirmationEventMap>(
-    type: K,
-    listener: (this: GlobalConfirmation, ev: ConfirmationEventMap[K]) => void
-  ): void;
-  addEventListener(
-    type: string,
-    listener: EventListenerOrEventListenerObject
-  ): void;
-  removeEventListener<K extends keyof ConfirmationEventMap>(
-    type: K,
-    listener: (this: GlobalConfirmation, ev: ConfirmationEventMap[K]) => void
-  ): void;
-  removeEventListener(
-    type: string,
-    listener: EventListenerOrEventListenerObject
-  ): void;
+interface ConfirmationModalActions {
+  showConfirmation: (props: ConfirmationProperties) => Promise<boolean>;
 }
-
-let confirmationId = 0;
-
-class GlobalConfirmation extends EventTarget {
+class GlobalConfirmationModalState implements ConfirmationModalActions {
+  private confirmationId = 0;
+  onShowCallback: ((props: OnShowConfirmationProperties) => void) | null = null;
   showConfirmation(props: ConfirmationProperties) {
     return new Promise<boolean>((resolve, reject) => {
-      this.dispatchEvent(
-        new CustomEvent<ShowConfirmationEventDetail>('show-confirmation', {
-          detail: {
-            props: { ...props, confirmationId: ++confirmationId },
-            resolve,
-            reject,
-          },
-        })
-      );
+      this.onShowCallback?.({
+        props,
+        resolve,
+        reject,
+        confirmationId: ++this.confirmationId,
+      });
     });
   }
 }
-const globalConfirmation = new GlobalConfirmation();
-
-export const showConfirmation =
-  globalConfirmation.showConfirmation.bind(globalConfirmation);
 
-const ConfirmationModalContext =
-  React.createContext<ConfirmationModalContextData>({
-    isMounted: false,
-    showConfirmation,
-  });
-
-type ConfirmationModalAreaProps = Partial<
-  ShowConfirmationEventDetail['props']
-> & { open: boolean };
+const confirmationModalState = new GlobalConfirmationModalState();
+
+/**
+ * Programmatically show a
+ * [leafygreen ConfirmationModal](https://www.mongodb.design/component/confirmation-modal)
+ * component and (optionally) await on the user input. Can be used both inside
+ * and __outside__ React rendering tree. Useful when user needs to confirm an
+ * action before it can be executed or to prominently display information as a
+ * side-effect of some other user action.
+ *
+ * @example
+ * async function dropDatabaseAction() {
+ *   const confirmed = await showConfirmation({
+ *     variant: 'danger',
+ *     title: 'Are you sure you want to drop database?',
+ *   });
+ *
+ *   if (confirmed) {
+ *     dataService.dropDatabase(...)
+ *   }
+ * }
+ *
+ * @example
+ * <Button
+ *   onClick={() => {
+ *     void showConfirmation({
+ *       title: 'Details',
+ *       description: <> ... </>,
+ *       hideCancelButton: true,
+ *       buttonText: 'OK',
+ *     });
+ *   }}
+ * >
+ *   Show detailed info
+ * </Button>
+ *
+ * @param props ConfirmationModal rendering properties
+ */
+export const showConfirmation = confirmationModalState.showConfirmation.bind(
+  confirmationModalState
+);
 
 const hideButtonStyles = css({
   display: 'none !important',
 });
 
-export const ConfirmationModalArea: React.FC = ({ children }) => {
-  const hasParentContext = useContext(ConfirmationModalContext).isMounted;
-
-  const [confirmationProps, setConfirmationProps] =
-    useState<ConfirmationModalAreaProps>({
-      open: false,
-      confirmationId: -1,
-    });
+const _ConfirmationModalArea: React.FunctionComponent = ({ children }) => {
+  const [confirmationProps, setConfirmationProps] = useState<
+    Partial<ConfirmationProperties> & { open: boolean; confirmationId: number }
+  >({
+    open: false,
+    confirmationId: -1,
+  });
   const callbackRef = useRef<ConfirmationCallback>();
-
-  const listenerRef =
-    useRef<(event: CustomEvent<ShowConfirmationEventDetail>) => void>();
-
-  const contextValue = React.useMemo(
-    () => ({
-      showConfirmation: (props: ConfirmationProperties) => {
-        return new Promise<boolean>((resolve, reject) => {
-          const event = new CustomEvent<ShowConfirmationEventDetail>(
-            'show-confirmation',
-            {
-              detail: {
-                props: { ...props, confirmationId: ++confirmationId },
-                resolve,
-                reject,
-              },
-            }
-          );
-          listenerRef.current?.(event);
-        });
-      },
-      isMounted: true,
-    }),
-    []
-  );
-
-  useEffect(() => {
-    return () => {
-      callbackRef.current?.(false);
-    };
-  }, []);
-
-  // Event listener to use confirmation modal outside of react
-  useEffect(() => {
-    const listener = ({
-      detail: { resolve, reject, props },
-    }: CustomEvent<ShowConfirmationEventDetail>) => {
-      setConfirmationProps({ open: true, ...props });
+  const confirmationModalStateRef = useRef<GlobalConfirmationModalState>();
+
+  if (!confirmationModalStateRef.current) {
+    confirmationModalStateRef.current = confirmationModalState;
+    confirmationModalStateRef.current.onShowCallback = ({
+      props,
+      resolve,
+      reject,
+      confirmationId,
+    }) => {
+      setConfirmationProps({ open: true, confirmationId, ...props });
       const onAbort = () => {
-        setConfirmationProps({ open: false, ...props });
+        setConfirmationProps((state) => {
+          return { ...state, open: false };
+        });
         reject(props.signal?.reason);
       };
       callbackRef.current = (confirmed) => {
@@ -149,40 +130,42 @@ export const ConfirmationModalArea: React.FC = ({ children }) => {
       };
       props.signal?.addEventListener('abort', onAbort);
     };
-    listenerRef.current = listener;
-    globalConfirmation.addEventListener('show-confirmation', listener);
+  }
+
+  useEffect(() => {
     return () => {
-      globalConfirmation.removeEventListener('show-confirmation', listener);
+      callbackRef.current?.(false);
+      if (confirmationModalStateRef.current) {
+        confirmationModalStateRef.current.onShowCallback = null;
+      }
     };
   }, []);
 
-  const handleConfirm = () => {
-    onUserAction(true);
-  };
-
-  const handleCancel = () => {
-    onUserAction(false);
-  };
-
-  const onUserAction = (value: boolean) => {
-    setConfirmationProps((state) => ({ ...state, open: false }));
+  const onUserAction = useCallback((value: boolean) => {
+    setConfirmationProps((state) => {
+      return { ...state, open: false };
+    });
     callbackRef.current?.(value);
     callbackRef.current = undefined;
-  };
+  }, []);
 
-  if (hasParentContext) {
-    return <>{children}</>;
-  }
+  const handleConfirm = useCallback(() => {
+    onUserAction(true);
+  }, [onUserAction]);
+
+  const handleCancel = useCallback(() => {
+    onUserAction(false);
+  }, [onUserAction]);
 
   return (
-    <ConfirmationModalContext.Provider value={contextValue}>
+    <>
       {children}
       <ConfirmationModal
         // To make sure that confirmation modal internal state is reset for
         // every confirmation request triggered with showConfirmation method we
         // pass `confirmationId` as a component key to force React to remount it
         // when request starts
-        key={confirmationId}
+        key={confirmationProps.confirmationId}
         data-testid={confirmationProps['data-testid'] ?? 'confirmation-modal'}
         open={confirmationProps.open}
         title={confirmationProps.title ?? 'Are you sure?'}
@@ -205,16 +188,22 @@ export const ConfirmationModalArea: React.FC = ({ children }) => {
       >
         {confirmationProps.description}
       </ConfirmationModal>
-    </ConfirmationModalContext.Provider>
+    </>
   );
 };
 
-export const useConfirmationModal = () => {
-  const { isMounted, showConfirmation } = useContext(ConfirmationModalContext);
-  if (!isMounted) {
-    throw new Error(
-      'useConfirmationModal must be used within a ConfirmationModalArea'
-    );
+const ConfirmationModalAreaMountedContext = React.createContext(false);
+
+export const ConfirmationModalArea: React.FunctionComponent = ({
+  children,
+}) => {
+  if (useContext(ConfirmationModalAreaMountedContext)) {
+    return <>{children}</>;
   }
-  return { showConfirmation };
+
+  return (
+    <ConfirmationModalAreaMountedContext.Provider value={true}>
+      <_ConfirmationModalArea>{children}</_ConfirmationModalArea>
+    </ConfirmationModalAreaMountedContext.Provider>
+  );
 };
diff --git a/packages/compass-components/src/hooks/use-error-details.tsx b/packages/compass-components/src/hooks/use-error-details.tsx
index 99302afa1c2..50a6ae270db 100644
--- a/packages/compass-components/src/hooks/use-error-details.tsx
+++ b/packages/compass-components/src/hooks/use-error-details.tsx
@@ -1,38 +1,30 @@
-import {
-  type showConfirmation as originalShowConfirmation,
-  showConfirmation,
-} from './use-confirmation';
+import { showConfirmation } from './use-confirmation';
 import { Code } from '../components/leafygreen';
 import React from 'react';
 import { ButtonVariant } from '..';
 
-const getShowErrorDetails = (
-  showConfirmation: typeof originalShowConfirmation
-) => {
-  return ({
-    details,
-    closeAction,
-  }: {
-    details: Record<string, unknown>;
-    closeAction: 'back' | 'close';
-  }) =>
-    void showConfirmation({
-      title: 'Error details',
-      description: (
-        <Code
-          language="json"
-          data-testid="error-details-json"
-          id="error-details-json"
-        >
-          {JSON.stringify(details, undefined, 2)}
-        </Code>
-      ),
-      hideCancelButton: true,
-      buttonText: closeAction.replace(/\b\w/g, (c) => c.toUpperCase()),
-      confirmButtonProps: {
-        variant: ButtonVariant.Default,
-      },
-    });
+export const showErrorDetails = function showErrorDetails({
+  details,
+  closeAction,
+}: {
+  details: Record<string, unknown>;
+  closeAction: 'back' | 'close';
+}) {
+  void showConfirmation({
+    title: 'Error details',
+    description: (
+      <Code
+        language="json"
+        data-testid="error-details-json"
+        id="error-details-json"
+      >
+        {JSON.stringify(details, undefined, 2)}
+      </Code>
+    ),
+    hideCancelButton: true,
+    buttonText: closeAction.replace(/\b\w/g, (c) => c.toUpperCase()),
+    confirmButtonProps: {
+      variant: ButtonVariant.Default,
+    },
+  });
 };
-
-export const showErrorDetails = getShowErrorDetails(showConfirmation);
diff --git a/packages/compass-components/src/hooks/use-toast.spec.tsx b/packages/compass-components/src/hooks/use-toast.spec.tsx
index e8e91979254..c0f14df415c 100644
--- a/packages/compass-components/src/hooks/use-toast.spec.tsx
+++ b/packages/compass-components/src/hooks/use-toast.spec.tsx
@@ -1,5 +1,4 @@
 import {
-  cleanup,
   render,
   screen,
   waitForElementToBeRemoved,
@@ -8,7 +7,7 @@ import {
 import { expect } from 'chai';
 import React from 'react';
 
-import { ToastArea, useToast } from './use-toast';
+import { ToastArea, openToast, closeToast } from './use-toast';
 import type { ToastProperties } from './use-toast';
 
 const OpenToastButton = ({
@@ -19,9 +18,13 @@ const OpenToastButton = ({
   namespace: string;
   id: string;
 } & ToastProperties) => {
-  const { openToast } = useToast(namespace);
   return (
-    <button type="button" onClick={() => openToast(id, toastProps)}>
+    <button
+      type="button"
+      onClick={() => {
+        openToast(`${namespace}--${id}`, toastProps);
+      }}
+    >
       Open Toast
     </button>
   );
@@ -34,17 +37,19 @@ const CloseToastButton = ({
   namespace: string;
   id: string;
 }) => {
-  const { closeToast } = useToast(namespace);
   return (
-    <button type="button" onClick={() => closeToast(id)}>
+    <button
+      type="button"
+      onClick={() => {
+        closeToast(`${namespace}--${id}`, id);
+      }}
+    >
       Close Toast
     </button>
   );
 };
 
-describe('useToast', function () {
-  afterEach(cleanup);
-
+describe('openToast / closeToast', function () {
   it('opens and closes a toast', async function () {
     render(
       <ToastArea>
diff --git a/packages/compass-components/src/hooks/use-toast.tsx b/packages/compass-components/src/hooks/use-toast.tsx
index 126b57dc80a..dcd8f09c9c4 100644
--- a/packages/compass-components/src/hooks/use-toast.tsx
+++ b/packages/compass-components/src/hooks/use-toast.tsx
@@ -1,11 +1,4 @@
-import React, {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import type { ToastProps } from '../components/leafygreen';
 import {
   ToastProvider,
@@ -105,21 +98,58 @@ class GlobalToastState implements ToastActions {
 
 const toastState = new GlobalToastState();
 
+/**
+ * Programmatically trigger a
+ * [leafygreen Toast](https://www.mongodb.design/component/toast/code-docs)
+ * component to appear on the screen. Can be used both inside and __outside__
+ * React rendering tree. The latter is especially useful for triggering toast
+ * showing up for any async business logic flow.
+ *
+ * @example
+ * function insertDocumentAction() {
+ *   dataService.insertOne(...).then(
+ *     () => {
+ *       openToast(
+ *         `insert-doc-${ns}`,
+ *         { variant: 'success', title: 'Successfully inserted document' }
+ *       )
+ *     },
+ *     (err) => {
+ *       openToast(
+ *         `insert-doc-${ns}`,
+ *         { variant: 'warning', title: 'Failed to insert document', description: err.message }
+ *       )
+ *     }
+ *   )
+ * }
+ *
+ * Same method can be used to update the content of the toast that is already
+ * displayed
+ *
+ * @example
+ * function insertManyDocuments() {
+ *   let total = 0;
+ *   for (const doc of docs) {
+ *     await dataService.insertOne(doc);
+ *     openToast(
+ *       `insert-doc-${ns}`,
+ *       { variant: 'progress', title: 'Inserting documents', progress: docs.length / ++total }
+ *     )
+ *   }
+ * }
+ *
+ * @param id unique toast id that can be used to close the toast later
+ * @param props Toast rendering properties
+ */
 export const openToast = toastState.openToast.bind(toastState);
 
+/**
+ * Programmatically close a toast with a matching id
+ *
+ * @param id unique toast id
+ */
 export const closeToast = toastState.closeToast.bind(toastState);
 
-const toastActions = { openToast, closeToast };
-
-const ToastContext = createContext<ToastActions>({
-  openToast: () => {
-    //
-  },
-  closeToast: () => {
-    //
-  },
-});
-
 const _ToastArea: React.FunctionComponent = ({ children }) => {
   // NB: the way leafygreen implements this hook leads to anything specifying
   // toast methods in hooks dependencies to constantly update potentially
@@ -157,11 +187,7 @@ const _ToastArea: React.FunctionComponent = ({ children }) => {
     };
   }, []);
 
-  return (
-    <ToastContext.Provider value={toastActions}>
-      {children}
-    </ToastContext.Provider>
-  );
+  return <>{children}</>;
 };
 
 const ToastAreaMountedContext = React.createContext(false);
@@ -186,42 +212,3 @@ export const ToastArea: React.FunctionComponent = ({ children }) => {
     </ToastAreaMountedContext.Provider>
   );
 };
-
-/**
- * @example
- *
- * ```
- * const MyButton = () => {
- *   const { openToast } = useToast('namespace');
- *   return <button type="button" onClick={() => openToast(
- *      'myToast1', {title: 'This is a notification'})} />
- * };
- *
- * <ToastArea><MyButton/><ToastArea>
- * ```
- *
- * @returns
- */
-export function useToast(namespace: string): ToastActions {
-  const { openToast: openGlobalToast, closeToast: closeGlobalToast } =
-    useContext(ToastContext);
-
-  const openToast = useCallback(
-    (toastId: string, toastProperties: ToastProperties): void => {
-      openGlobalToast(`${namespace}--${toastId}`, toastProperties);
-    },
-    [namespace, openGlobalToast]
-  );
-
-  const closeToast = useCallback(
-    (toastId: string): void => {
-      closeGlobalToast(`${namespace}--${toastId}`);
-    },
-    [namespace, closeGlobalToast]
-  );
-
-  return {
-    openToast,
-    closeToast,
-  };
-}
diff --git a/packages/compass-components/src/index.ts b/packages/compass-components/src/index.ts
index 2b47da41542..62c5190a27f 100644
--- a/packages/compass-components/src/index.ts
+++ b/packages/compass-components/src/index.ts
@@ -80,7 +80,7 @@ export { Size as SelectSize } from '@leafygreen-ui/select';
 export { useId } from '@react-aria/utils';
 export { VisuallyHidden } from '@react-aria/visually-hidden';
 
-export { useToast, openToast, closeToast, ToastArea } from './hooks/use-toast';
+export { openToast, closeToast, ToastArea } from './hooks/use-toast';
 
 export { breakpoints, spacing } from '@leafygreen-ui/tokens';
 import IndexIcon from './components/index-icon';
@@ -177,7 +177,6 @@ export { useEffectOnChange } from './hooks/use-effect-on-change';
 export { HorizontalRule } from './components/horizontal-rule';
 export { IndexBadge, IndexKeysBadge } from './components/index-keys-badge';
 export {
-  useConfirmationModal,
   ConfirmationModalVariant,
   ConfirmationModalArea,
   showConfirmation,
diff --git a/packages/compass-connection-import-export/src/components/export-modal.tsx b/packages/compass-connection-import-export/src/components/export-modal.tsx
index 10837f26b3b..affee5047eb 100644
--- a/packages/compass-connection-import-export/src/components/export-modal.tsx
+++ b/packages/compass-connection-import-export/src/components/export-modal.tsx
@@ -5,7 +5,7 @@ import {
   css,
   FormFieldContainer,
   FormModal,
-  useToast,
+  openToast,
 } from '@mongodb-js/compass-components';
 import { FileInput } from './file-input';
 import { Passphrase } from './passphrase';
@@ -34,12 +34,11 @@ export function ExportConnectionsModal({
   afterExport?: () => void;
   trackingProps?: Record<string, unknown>;
 }): React.ReactElement {
-  const { openToast } = useToast('compass-connection-import-export');
   const finish = useCallback(
     (result: ImportExportResult) => {
       setOpen(false);
       if (result === 'succeeded') {
-        openToast('export-succeeded', {
+        openToast('compass-connection-import-export--export-succeeded', {
           title: 'Export successful',
           description: 'Connections successfully exported',
           variant: 'success',
@@ -48,7 +47,7 @@ export function ExportConnectionsModal({
         afterExport?.();
       }
     },
-    [afterExport, openToast, setOpen]
+    [afterExport, setOpen]
   );
 
   const openModalThroughIpc = useCallback(() => {
diff --git a/packages/compass-connection-import-export/src/components/import-modal.tsx b/packages/compass-connection-import-export/src/components/import-modal.tsx
index 98022c9fc1b..206d3faa1eb 100644
--- a/packages/compass-connection-import-export/src/components/import-modal.tsx
+++ b/packages/compass-connection-import-export/src/components/import-modal.tsx
@@ -6,7 +6,7 @@ import {
   FormFieldContainer,
   FormModal,
   spacing,
-  useToast,
+  openToast,
 } from '@mongodb-js/compass-components';
 import { FileInput } from './file-input';
 import { Passphrase } from './passphrase';
@@ -37,12 +37,11 @@ export function ImportConnectionsModal({
   setOpen: (newOpen: boolean, trackingProps?: Record<string, unknown>) => void;
   trackingProps?: Record<string, unknown>;
 }): React.ReactElement {
-  const { openToast } = useToast('compass-connection-import-export');
   const finish = useCallback(
     (result: ImportExportResult) => {
       setOpen(false);
       if (result === 'succeeded') {
-        openToast('import-succeeded', {
+        openToast('compass-connection-import-export--import-succeeded', {
           title: 'Import successful',
           description: 'New connections have been added',
           variant: 'success',
@@ -50,7 +49,7 @@ export function ImportConnectionsModal({
         });
       }
     },
-    [openToast, setOpen]
+    [setOpen]
   );
 
   const openModalThroughIpc = useCallback(() => {
diff --git a/packages/compass-schema-validation/src/components/validation-editor.tsx b/packages/compass-schema-validation/src/components/validation-editor.tsx
index 613e9ca472a..2167b2e3851 100644
--- a/packages/compass-schema-validation/src/components/validation-editor.tsx
+++ b/packages/compass-schema-validation/src/components/validation-editor.tsx
@@ -11,7 +11,7 @@ import {
   Banner,
   Icon,
   palette,
-  useConfirmationModal,
+  showConfirmation,
   useDarkMode,
   KeylineCard,
   ButtonVariant,
@@ -177,7 +177,6 @@ export const ValidationEditor: React.FunctionComponent<
   const enableExportSchema = usePreference('enableExportSchema');
   const track = useTelemetry();
   const connectionInfoRef = useConnectionInfoRef();
-  const { showConfirmation } = useConfirmationModal();
 
   const clearSampleDocumentsRef = useRef(clearSampleDocuments);
   clearSampleDocumentsRef.current = clearSampleDocuments;
diff --git a/packages/connection-form/src/components/connection-string-input.tsx b/packages/connection-form/src/components/connection-string-input.tsx
index ba1653c984e..ac89f3fdaba 100644
--- a/packages/connection-form/src/components/connection-string-input.tsx
+++ b/packages/connection-form/src/components/connection-string-input.tsx
@@ -12,7 +12,7 @@ import {
   Toggle,
   spacing,
   css,
-  useConfirmationModal,
+  showConfirmation,
 } from '@mongodb-js/compass-components';
 import { redactConnectionString } from 'mongodb-connection-string-url';
 import type { UpdateConnectionFormField } from '../hooks/use-connect-form';
@@ -92,7 +92,6 @@ function ConnectionStringInput({
   const textAreaEl = useRef<HTMLTextAreaElement>(null);
   const [editingConnectionString, setEditingConnectionString] =
     useState(connectionString);
-  const { showConfirmation } = useConfirmationModal();
 
   const [isTextAreaFocussed, setIsTextAreaFocussed] = useState(false);