diff --git a/.changeset/cold-needles-know.md b/.changeset/cold-needles-know.md
new file mode 100644
index 00000000000..5de88690b88
--- /dev/null
+++ b/.changeset/cold-needles-know.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': major
+---
+
+`toaster` import has been removed and replaced with `useToaster` which returns a toaster object with the same API.
diff --git a/.changeset/rich-garlics-love.md b/.changeset/rich-garlics-love.md
new file mode 100644
index 00000000000..0c7f1819edc
--- /dev/null
+++ b/.changeset/rich-garlics-love.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-css': patch
+---
+
+`.iui-toast-anchor` can now be applied on a `<button>`.
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Anchor To Button.png b/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Anchor To Button.png
index c161869e995..b3e11009a11 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Anchor To Button.png and b/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Anchor To Button.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Informational.png b/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Informational.png
index fca6446f4b4..08bd9847552 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Informational.png and b/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Informational.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Negative.png b/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Negative.png
index 75f2023da76..5a2af8c8d59 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Negative.png and b/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Negative.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Position Changed.png b/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Position Changed.png
index c78324e3b0d..94c87949518 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Position Changed.png and b/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Position Changed.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Positive.png b/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Positive.png
index c161869e995..b3e11009a11 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Positive.png and b/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Positive.png differ
diff --git a/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Warning.png b/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Warning.png
index d1f26e3c369..e147276f227 100755
Binary files a/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Warning.png and b/apps/storybook/cypress-visual-screenshots/baseline/Toasts.test.ts-Warning.png differ
diff --git a/apps/storybook/src/Toasts.stories.tsx b/apps/storybook/src/Toasts.stories.tsx
index 036ae82c471..81ea4fddb21 100644
--- a/apps/storybook/src/Toasts.stories.tsx
+++ b/apps/storybook/src/Toasts.stories.tsx
@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
-import { Button, toaster, ProgressRadial } from '@itwin/itwinui-react';
+import { Button, useToaster, ProgressRadial } from '@itwin/itwinui-react';
 import { ToastProps } from '@itwin/itwinui-react/esm/core/Toast/Toast';
 import { ToasterSettings } from '@itwin/itwinui-react/esm/core/Toast/Toaster';
 
@@ -87,6 +87,8 @@ export const Positive: Story<ToastProps & ToasterSettings> = ({
   placement,
   order,
 }) => {
+  const toaster = useToaster();
+
   const displayPositiveToast = () => {
     toaster.setSettings({
       placement: placement ?? 'top',
@@ -130,6 +132,8 @@ export const Negative: Story<ToastProps & ToasterSettings> = ({
   placement,
   order,
 }) => {
+  const toaster = useToaster();
+
   const displayNegativeToast = () => {
     toaster.setSettings({
       placement: placement ?? 'top',
@@ -173,6 +177,8 @@ export const Informational: Story<ToastProps & ToasterSettings> = ({
   placement,
   order,
 }) => {
+  const toaster = useToaster();
+
   const displayInformationalToast = () => {
     toaster.setSettings({
       placement: placement ?? 'top',
@@ -212,6 +218,8 @@ export const Warning: Story<ToastProps & ToasterSettings> = ({
   order,
   ...options
 }) => {
+  const toaster = useToaster();
+
   const displayWarningToast = () => {
     toaster.setSettings({
       placement: placement ?? 'top',
@@ -245,6 +253,8 @@ export const PositionChanged: Story<ToastProps & ToasterSettings> = ({
   order,
   ...options
 }) => {
+  const toaster = useToaster();
+
   const displayPositionChangedToast = () => {
     toaster.setSettings({
       placement: placement ?? 'bottom-end',
@@ -283,6 +293,8 @@ export const AnchorToButton: Story<ToastProps & ToasterSettings> = ({
   placement,
   order,
 }) => {
+  const toaster = useToaster();
+
   const buttonRef = React.useRef(null);
   const displayPositiveToast = () => {
     toaster.setSettings({
@@ -331,6 +343,8 @@ export const CloseIndividual: Story<ToastProps & ToasterSettings> = ({
   placement,
   order,
 }) => {
+  const toaster = useToaster();
+
   const displayProcessToast = () => {
     toaster.setSettings({
       placement: placement ?? 'top',
diff --git a/examples/Toast.main.tsx b/examples/Toast.main.tsx
index fc0c0b20475..2b587847d0c 100644
--- a/examples/Toast.main.tsx
+++ b/examples/Toast.main.tsx
@@ -3,9 +3,11 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import { toaster, Button } from '@itwin/itwinui-react';
+import { useToaster, Button } from '@itwin/itwinui-react';
 
 export default () => {
+  const toaster = useToaster();
+
   return (
     <Button
       onClick={() => {
diff --git a/packages/itwinui-css/src/toast/toast.scss b/packages/itwinui-css/src/toast/toast.scss
index 0b626ab194f..e6bea187ef5 100644
--- a/packages/itwinui-css/src/toast/toast.scss
+++ b/packages/itwinui-css/src/toast/toast.scss
@@ -151,6 +151,12 @@
   }
 
   &-anchor {
+    &:where(button) {
+      font-family: inherit;
+      border: none;
+      background: transparent;
+      padding: 0;
+    }
     @include anchor.iui-anchor-underline('on-initial');
     border-radius: var(--iui-border-radius-1);
     cursor: pointer;
diff --git a/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx b/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx
index 73ff0acf7e2..51b47ea818f 100644
--- a/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx
+++ b/packages/itwinui-react/src/core/ThemeProvider/ThemeProvider.tsx
@@ -7,6 +7,7 @@ import cx from 'classnames';
 import { useMediaQuery, useMergedRefs, Box } from '../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../utils/index.js';
 import { ThemeContext } from './ThemeContext.js';
+import { ToastProvider, Toaster } from '../Toast/Toaster.js';
 
 export type ThemeOptions = {
   /**
@@ -110,8 +111,12 @@ export const ThemeProvider = React.forwardRef((props, ref) => {
         ref={ref}
         {...rest}
       >
-        {children}
-        <div ref={portalContainerRef} />
+        <ToastProvider>
+          {children}
+          <div ref={portalContainerRef}>
+            <Toaster />
+          </div>
+        </ToastProvider>
       </Root>
     </ThemeContext.Provider>
   );
diff --git a/packages/itwinui-react/src/core/Toast/Toast.test.tsx b/packages/itwinui-react/src/core/Toast/Toast.test.tsx
index 61a6b741171..0c2e1a9535c 100644
--- a/packages/itwinui-react/src/core/Toast/Toast.test.tsx
+++ b/packages/itwinui-react/src/core/Toast/Toast.test.tsx
@@ -12,6 +12,7 @@ import {
   SvgStatusWarning,
 } from '../utils/index.js';
 import userEvent from '@testing-library/user-event';
+import { ToastProvider } from './Toaster.js';
 
 it('renders the category classes & icons correctly', () => {
   const categories: Array<ToastCategory> = [
@@ -22,13 +23,15 @@ it('renders the category classes & icons correctly', () => {
   ];
   categories.forEach((category) => {
     const { container } = render(
-      <Toast
-        isVisible={true}
-        type='persisting'
-        content='Job Processing Completed'
-        category={category}
-        id={1}
-      />,
+      <ToastProvider>
+        <Toast
+          isVisible={true}
+          type='persisting'
+          content='Job Processing Completed'
+          category={category}
+          id={1}
+        />
+      </ToastProvider>,
     );
 
     expect(container.querySelector(`.iui-toast.iui-${category}`)).toBeTruthy();
@@ -58,13 +61,15 @@ it('renders the category classes & icons correctly', () => {
 
 it('renders the message correctly', () => {
   const { getByText } = render(
-    <Toast
-      isVisible={true}
-      type='persisting'
-      content='Job Processing Completed'
-      category='positive'
-      id={1}
-    />,
+    <ToastProvider>
+      <Toast
+        isVisible={true}
+        type='persisting'
+        content='Job Processing Completed'
+        category='positive'
+        id={1}
+      />
+    </ToastProvider>,
   );
 
   getByText('Job Processing Completed');
@@ -73,17 +78,19 @@ it('renders the message correctly', () => {
 it('renders a report message Link correctly', async () => {
   const mockedFn = jest.fn();
   const { container } = render(
-    <Toast
-      isVisible={true}
-      type='persisting'
-      content='Job Processing Completed'
-      category='positive'
-      link={{
-        title: 'View Message Function',
-        onClick: mockedFn,
-      }}
-      id={1}
-    />,
+    <ToastProvider>
+      <Toast
+        isVisible={true}
+        type='persisting'
+        content='Job Processing Completed'
+        category='positive'
+        link={{
+          title: 'View Message Function',
+          onClick: mockedFn,
+        }}
+        id={1}
+      />
+    </ToastProvider>,
   );
 
   const link = container.querySelector('.iui-toast-anchor') as HTMLElement;
@@ -94,13 +101,15 @@ it('renders a report message Link correctly', async () => {
 
 it('renders the close icon correctly', () => {
   const { container } = render(
-    <Toast
-      isVisible={true}
-      type='persisting'
-      content='Job Processing Completed'
-      category='positive'
-      id={1}
-    />,
+    <ToastProvider>
+      <Toast
+        isVisible={true}
+        type='persisting'
+        content='Job Processing Completed'
+        category='positive'
+        id={1}
+      />
+    </ToastProvider>,
   );
 
   expect(
@@ -110,13 +119,15 @@ it('renders the close icon correctly', () => {
 
 it('not render close icon in temporary', () => {
   const { container } = render(
-    <Toast
-      isVisible={true}
-      type='temporary'
-      content='Job Processing Completed'
-      category='positive'
-      id={1}
-    />,
+    <ToastProvider>
+      <Toast
+        isVisible={true}
+        type='temporary'
+        content='Job Processing Completed'
+        category='positive'
+        id={1}
+      />
+    </ToastProvider>,
   );
 
   expect(
@@ -126,14 +137,16 @@ it('not render close icon in temporary', () => {
 
 it('renders the close icon when hasCloseButton', () => {
   const { container } = render(
-    <Toast
-      isVisible={true}
-      hasCloseButton={true}
-      type='temporary'
-      content='Job Processing Completed'
-      category='positive'
-      id={1}
-    />,
+    <ToastProvider>
+      <Toast
+        isVisible={true}
+        hasCloseButton={true}
+        type='temporary'
+        content='Job Processing Completed'
+        category='positive'
+        id={1}
+      />
+    </ToastProvider>,
   );
 
   expect(
@@ -146,14 +159,15 @@ it('should close temporary toast after 7s', () => {
 
   const mockedFn = jest.fn();
   const { container } = render(
-    <Toast
-      isVisible={true}
-      type='temporary'
-      content='Job Processing Completed'
-      category='informational'
-      id={1}
-      onRemove={mockedFn}
-    />,
+    <ToastProvider>
+      <Toast
+        type='temporary'
+        content='Job Processing Completed'
+        category='informational'
+        id={1}
+        onRemove={mockedFn}
+      />
+    </ToastProvider>,
   );
 
   expect(container.querySelector('.iui-toast-all')).toBeTruthy();
diff --git a/packages/itwinui-react/src/core/Toast/Toast.tsx b/packages/itwinui-react/src/core/Toast/Toast.tsx
index f343e1e5c2a..b516cda0c10 100644
--- a/packages/itwinui-react/src/core/Toast/Toast.tsx
+++ b/packages/itwinui-react/src/core/Toast/Toast.tsx
@@ -10,9 +10,11 @@ import {
   StatusIconMap,
   SvgCloseSmall,
   Box,
+  useSafeContext,
 } from '../utils/index.js';
 import type { CommonProps } from '../utils/index.js';
 import { IconButton } from '../Buttons/index.js';
+import { ToasterStateContext } from './Toaster.js';
 
 const isMotionOk = () =>
   getWindow()?.matchMedia?.('(prefers-reduced-motion: no-preference)')?.matches;
@@ -44,10 +46,9 @@ export type ToastProps = {
    */
   type?: 'persisting' | 'temporary';
   /**
-   * Boolean indicating when the toast is visible.
-   * When false, will close the Toast and call onRemove when finished closing.
+   * Controlled boolean prop indicating whether the toast is visible.
    */
-  isVisible: boolean;
+  isVisible?: boolean;
   /**
    * Duration of the toast in millisecond.
    * @default 7000
@@ -59,9 +60,12 @@ export type ToastProps = {
    */
   hasCloseButton?: boolean;
   /**
-   * A Callback that can be used to add additional information to a Toast
+   * Props for a button/link that can be used to perform an action
+   * (e.g. to show additional information).
    */
-  link?: { onClick: () => void; title: string };
+  link?: {
+    title: string;
+  } & Omit<React.ComponentPropsWithoutRef<'button'>, 'children'>;
   /**
    * Function called when the toast is all the way closed.
    */
@@ -70,10 +74,6 @@ export type ToastProps = {
    * Element to which the toast will animate out to.
    */
   animateOutTo?: HTMLElement | null;
-  /**
-   * Parent toaster placement position for smoother animation.
-   */
-  placementPosition?: 'top' | 'bottom';
 };
 
 /**
@@ -89,18 +89,21 @@ export const Toast = (props: ToastProps) => {
     content,
     category,
     type = 'temporary',
-    isVisible,
+    isVisible: isVisibleProp,
     link,
     duration = 7000,
     hasCloseButton,
     onRemove,
     animateOutTo,
-    placementPosition = 'top',
   } = props;
 
   const closeTimeout = React.useRef(0);
+  const { placement } = useSafeContext(ToasterStateContext).settings;
+  const placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
+
+  const [visible, setVisible] = React.useState(isVisibleProp ?? true);
+  const isVisible = isVisibleProp ?? visible;
 
-  const [visible, setVisible] = React.useState(isVisible);
   const [height, setHeight] = React.useState(0);
   const thisElement = React.useRef<HTMLDivElement>(null);
   const [margin, setMargin] = React.useState(0);
@@ -123,10 +126,6 @@ export const Toast = (props: ToastProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [duration, type]);
 
-  React.useEffect(() => {
-    setVisible(isVisible);
-  }, [isVisible]);
-
   React.useEffect(() => {
     // if we don't have animateOutTo point and not isVisible, set negative margin to move other toasts up.
     // Close all and close on toasts with no anchor.
@@ -180,7 +179,7 @@ export const Toast = (props: ToastProps) => {
   return (
     <Transition
       timeout={{ enter: 240, exit: animateOutTo ? 400 : 120 }}
-      in={visible}
+      in={isVisible}
       appear={true}
       unmountOnExit={true}
       onEnter={(node: HTMLElement) => {
@@ -207,27 +206,25 @@ export const Toast = (props: ToastProps) => {
       }}
       onExited={onRemove}
     >
-      {
-        <Box
-          ref={thisElement}
-          className='iui-toast-all'
-          style={{
-            height,
-            ...marginStyle(),
-          }}
-        >
-          <div ref={onRef}>
-            <ToastPresentation
-              category={category}
-              content={content}
-              link={link}
-              type={type}
-              hasCloseButton={hasCloseButton}
-              onClose={close}
-            />
-          </div>
-        </Box>
-      }
+      <Box
+        ref={thisElement}
+        className='iui-toast-all'
+        style={{
+          height,
+          ...marginStyle(),
+        }}
+      >
+        <div ref={onRef}>
+          <ToastPresentation
+            category={category}
+            content={content}
+            link={link}
+            type={type}
+            hasCloseButton={hasCloseButton}
+            onClose={close}
+          />
+        </div>
+      </Box>
     </Transition>
   );
 };
@@ -262,7 +259,12 @@ export const ToastPresentation = (props: ToastPresentationProps) => {
       </Box>
       <Box className='iui-message'>{content}</Box>
       {link && (
-        <Box as='a' className='iui-toast-anchor' onClick={link.onClick}>
+        <Box
+          as='button'
+          className='iui-toast-anchor'
+          {...link}
+          title={undefined}
+        >
           {link.title}
         </Box>
       )}
diff --git a/packages/itwinui-react/src/core/Toast/ToastWrapper.test.tsx b/packages/itwinui-react/src/core/Toast/ToastWrapper.test.tsx
deleted file mode 100644
index 026b989c5aa..00000000000
--- a/packages/itwinui-react/src/core/Toast/ToastWrapper.test.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import { act, render } from '@testing-library/react';
-
-import { ToastWrapper, type ToastWrapperHandle } from './ToastWrapper.js';
-import type { ToastProps } from './Toast.js';
-import userEvent from '@testing-library/user-event';
-
-const mockToastObject1 = {
-  category: 'informational',
-  content: 'mockText1',
-  id: 1,
-  isVisible: true,
-  hasCloseButton: true,
-} as ToastProps;
-
-const mockToastObject2 = {
-  category: 'negative',
-  content: 'mockText2',
-  id: 2,
-  isVisible: true,
-} as ToastProps;
-
-let ref: React.RefObject<ToastWrapperHandle>;
-
-beforeEach(() => {
-  ref = React.createRef<ToastWrapperHandle>();
-});
-
-it('should render toasts', () => {
-  const { container } = render(<ToastWrapper ref={ref} />);
-  expect(container.querySelector('.iui-toast-wrapper')).toBeTruthy();
-
-  act(() => {
-    ref.current?.setToasts([mockToastObject1, mockToastObject2]);
-  });
-
-  const toasts = container.querySelectorAll('.iui-toast');
-  expect(toasts.length).toBe(2);
-  expect(toasts.item(0).classList).toContain('iui-informational');
-  expect(toasts.item(0).textContent).toBe('mockText1');
-  expect(toasts.item(1).classList).toContain('iui-negative');
-  expect(toasts.item(1).textContent).toBe('mockText2');
-});
-
-it('should remove toast with close icon click', async () => {
-  jest.useFakeTimers();
-  const { container } = render(<ToastWrapper ref={ref} />);
-  act(() => {
-    ref.current?.setToasts([mockToastObject1, mockToastObject2]);
-  });
-
-  expect(container.querySelector('.iui-toast-wrapper')).toBeTruthy();
-
-  let toasts = container.querySelectorAll('.iui-toast');
-  expect(toasts.length).toBe(2);
-  await act(async () => {
-    const closeIcon = container.querySelector(
-      '.iui-button[aria-label="Close"]',
-    ) as HTMLButtonElement;
-    const user = userEvent.setup({ delay: null });
-    await user.click(closeIcon);
-  });
-  act(() => {
-    jest.advanceTimersByTime(400);
-  });
-  toasts = container.querySelectorAll('.iui-toast');
-  expect(toasts.length).toBe(1);
-  jest.useRealTimers();
-});
-
-it('should remove all toasts', () => {
-  jest.useFakeTimers();
-  const { container } = render(<ToastWrapper ref={ref} />);
-  act(() => {
-    ref.current?.setToasts([mockToastObject1, mockToastObject2]);
-  });
-  expect(container.querySelector('.iui-toast-wrapper')).toBeTruthy();
-
-  let toasts = container.querySelectorAll('.iui-toast');
-  expect(toasts.length).toBe(2);
-  act(() => {
-    ref.current?.setToasts([]);
-  });
-
-  jest.advanceTimersByTime(400);
-  toasts = container.querySelectorAll('.iui-toast');
-  expect(toasts.length).toBe(0);
-  jest.useRealTimers();
-});
-
-it.each([
-  'top-start',
-  'top',
-  'top-end',
-  'bottom-start',
-  'bottom',
-  'bottom-end',
-] as const)('should change placement to %s', (placement) => {
-  const { container } = render(<ToastWrapper ref={ref} />);
-
-  act(() => {
-    ref.current?.setToasts([mockToastObject1, mockToastObject2]);
-    ref.current?.setPlacement(placement);
-  });
-
-  expect(container.querySelector('.iui-toast-wrapper')).toBeTruthy();
-  expect(
-    container.querySelector('.iui-toast-wrapper') as HTMLElement,
-  ).toHaveClass(`iui-placement-${placement}`);
-});
diff --git a/packages/itwinui-react/src/core/Toast/ToastWrapper.tsx b/packages/itwinui-react/src/core/Toast/ToastWrapper.tsx
deleted file mode 100644
index 6b1273b5c1b..00000000000
--- a/packages/itwinui-react/src/core/Toast/ToastWrapper.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
- * See LICENSE.md in the project root for license terms and full copyright notice.
- *--------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import cx from 'classnames';
-import Toast from './Toast.js';
-import type { ToastProps } from './Toast.js';
-import type { ToasterSettings } from './Toaster.js';
-import { Box } from '../utils/index.js';
-
-type ToastPlacement = NonNullable<ToasterSettings['placement']>;
-
-export type ToastWrapperHandle = {
-  setToasts: (toasts: ToastProps[]) => void;
-  setPlacement: (placement: ToastPlacement) => void;
-};
-
-export const ToastWrapper = React.forwardRef<ToastWrapperHandle>((_, ref) => {
-  const [toasts, setToasts] = React.useState<ToastProps[]>([]);
-  const [placement, setPlacement] = React.useState<ToastPlacement>('top');
-  const placementPosition = placement.startsWith('top') ? 'top' : 'bottom';
-
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      setToasts,
-      setPlacement,
-    }),
-    [],
-  );
-
-  return (
-    <Box className={cx(`iui-toast-wrapper`, `iui-placement-${placement}`)}>
-      {toasts.map((toastProps) => {
-        return (
-          <Toast
-            key={toastProps.id}
-            placementPosition={placementPosition}
-            {...toastProps}
-          />
-        );
-      })}
-    </Box>
-  );
-});
diff --git a/packages/itwinui-react/src/core/Toast/Toaster.test.tsx b/packages/itwinui-react/src/core/Toast/Toaster.test.tsx
index dd9d4ffa61f..ef5ce3559ed 100644
--- a/packages/itwinui-react/src/core/Toast/Toaster.test.tsx
+++ b/packages/itwinui-react/src/core/Toast/Toaster.test.tsx
@@ -2,12 +2,36 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { act, screen, waitForElementToBeRemoved } from '@testing-library/react';
-import type { ToastCategory, ToastProps } from './Toast.js';
-import Toaster, { type ToastOptions } from './Toaster.js';
+import * as React from 'react';
+import {
+  act,
+  fireEvent,
+  renderHook,
+  screen,
+  waitForElementToBeRemoved,
+} from '@testing-library/react';
+import type { ToastCategory } from './Toast.js';
+import {
+  Toaster,
+  ToastProvider,
+  useToaster,
+  type ToastOptions,
+} from './Toaster.js';
 
 const mockOnClick = jest.fn();
 
+function toasterContraption() {
+  const { result } = renderHook(() => useToaster(), {
+    wrapper: ({ children }) => (
+      <ToastProvider>
+        {children}
+        <Toaster />
+      </ToastProvider>
+    ),
+  });
+  return () => result.current;
+}
+
 function mockedOptions(): ToastOptions {
   return {
     duration: 2000,
@@ -21,157 +45,140 @@ function mockedOptions(): ToastOptions {
 }
 
 function assertAddedToast(
-  toast: ToastProps,
-  category: ToastCategory,
   content: string,
-  id: number,
-  options = mockedOptions(),
+  status: ToastCategory,
+  options: ToastOptions,
 ) {
-  expect(toast).toEqual(
-    expect.objectContaining({
-      ...options,
-      id: id,
-      content: content,
-      isVisible: true,
-      category: category,
-    }),
-  );
-}
+  const toast = screen.getByText(content).closest('.iui-toast');
+  expect(toast).toBeInTheDocument();
+  expect(toast).toHaveClass(`iui-${status}`);
 
-function assertRemovedToast(
-  toast: ToastProps,
-  category: ToastCategory,
-  content: string,
-  id: number,
-  options = mockedOptions(),
-) {
-  expect(toast).toEqual(
-    expect.objectContaining({
-      ...options,
-      id: id,
-      content: content,
-      isVisible: false,
-      category: category,
-    }),
-  );
+  if (options.link) {
+    const link = screen.getByText(options.link.title);
+    expect(link).toBeInTheDocument();
+    act(() => {
+      fireEvent.click(link);
+    });
+    expect(mockOnClick).toHaveBeenCalled();
+  }
+
+  if (options.hasCloseButton) {
+    const closeButton = screen.getByRole('button', { name: 'Close' });
+    expect(closeButton).toBeInTheDocument();
+  }
 }
 
-let toaster: Toaster;
+async function assertRemovedToast(content: string) {
+  act(() => {
+    jest.runAllTimers();
+  });
+  const maybeToast = screen.queryByText(content);
+  if (maybeToast) {
+    await waitForElementToBeRemoved(maybeToast);
+  }
+}
 
 beforeEach(() => {
-  toaster = new Toaster();
+  jest.useFakeTimers();
 });
-
 afterEach(() => {
-  toaster['toasts'] = [];
-  toaster['lastId'] = 0;
-  jest.clearAllMocks();
-  // This is the only thing I found to help with
-  // warning for calling `createRoot` on element, which already had it.
-  // Something is not fully reset in tests (this happens between multiple tests, not in single one)
-  const container = document.querySelector('#iui-toasts-container');
-  if (!!container) {
-    container.remove();
-  }
+  jest.useRealTimers();
+  mockOnClick.mockReset();
 });
 
 it.each(['positive', 'negative', 'informational', 'warning'] as const)(
   'should add toast with %s',
   async (status) => {
+    const toaster = toasterContraption();
     act(() => {
-      toaster[status]('mockContent', mockedOptions());
+      toaster()[status]('mockContent', mockedOptions());
     });
-    expect(await screen.findByText('mockContent')).toBeInTheDocument();
-    expect(toaster['toasts'].length).toBe(1);
-    assertAddedToast(toaster['toasts'][0], status, 'mockContent', 1);
+    assertAddedToast('mockContent', status, mockedOptions());
+    await assertRemovedToast('mockContent');
   },
 );
 
 it('should add toasts and remove all', async () => {
+  const toaster = toasterContraption();
+  const options = {
+    ...mockedOptions(),
+    link: undefined,
+    hasCloseButton: false,
+  };
   act(() => {
-    toaster.informational('mockContent', mockedOptions());
+    toaster().informational('mockContentInfo', options);
   });
-  expect(await screen.findByText('mockContent')).toBeInTheDocument();
-  assertAddedToast(toaster['toasts'][0], 'informational', 'mockContent', 1);
+  assertAddedToast('mockContentInfo', 'informational', options);
 
   act(() => {
-    toaster.positive('mockContentPositive', mockedOptions());
+    toaster().positive('mockContentPositive', options);
   });
-  expect(await screen.findByText('mockContentPositive')).toBeInTheDocument();
-  assertAddedToast(toaster['toasts'][0], 'positive', 'mockContentPositive', 2);
-
-  toaster.closeAll();
-  waitForElementToBeRemoved(screen.queryByText('mockContent'));
-  assertRemovedToast(toaster['toasts'][1], 'informational', 'mockContent', 1);
-  assertRemovedToast(
-    toaster['toasts'][0],
-    'positive',
-    'mockContentPositive',
-    2,
-  );
+  assertAddedToast('mockContentPositive', 'positive', options);
 
-  expect(
-    document.querySelector('.iui-toast-wrapper.iui-placement-top'),
-  ).toBeTruthy();
+  act(() => {
+    toaster().closeAll();
+  });
+  await assertRemovedToast('mockContentInfo');
+  await assertRemovedToast('mockContentPositive');
 });
 
 it('should add toast and remove using return function', async () => {
-  let close: () => void = () => {};
+  const toaster = toasterContraption();
+  let close = () => {};
   act(() => {
-    ({ close } = toaster.informational('mockContent', {
+    ({ close } = toaster().informational('mockContent', {
       ...mockedOptions(),
       type: 'persisting',
     }));
   });
-  expect(await screen.findByText('mockContent')).toBeInTheDocument();
-  assertAddedToast(
-    toaster['toasts'][0],
-    'informational',
-    'mockContent',
-
-    1,
-    {
-      ...mockedOptions(),
-      type: 'persisting',
-    },
-  );
-
-  close();
-  waitForElementToBeRemoved(screen.queryByText('mockContent'));
-  assertRemovedToast(
-    toaster['toasts'][0],
-    'informational',
-    'mockContent',
-
-    1,
-    {
-      ...mockedOptions(),
-      type: 'persisting',
-    },
-  );
 
-  expect(
-    document.querySelector('.iui-toast-wrapper.iui-placement-top'),
-  ).toBeTruthy();
-});
-
-it('should change order to bottom to top', async () => {
-  act(() => {
-    toaster.setSettings({ placement: 'top', order: 'ascending' });
+  assertAddedToast('mockContent', 'informational', {
+    ...mockedOptions(),
+    type: 'persisting',
   });
-  act(() => {
-    toaster.informational('mockContent', mockedOptions());
-  });
-  expect(await screen.findByText('mockContent')).toBeInTheDocument();
-  assertAddedToast(toaster['toasts'][0], 'informational', 'mockContent', 1);
 
-  act(() => {
-    toaster.positive('mockContentPositive', mockedOptions());
-  });
-  expect(await screen.findByText('mockContentPositive')).toBeInTheDocument();
-  assertAddedToast(toaster['toasts'][1], 'positive', 'mockContentPositive', 2);
+  act(() => close());
+  assertRemovedToast('mockContent');
 });
 
+it.each([
+  ['descending', 'top'],
+  ['ascending', 'top'],
+  ['auto', 'top'],
+  ['auto', 'bottom'],
+] as const)(
+  'should respect order (%s) and placement (%s)',
+  async (order, placement) => {
+    const toaster = toasterContraption();
+    const options = {
+      ...mockedOptions(),
+      link: undefined,
+      hasCloseButton: false,
+    };
+    act(() => {
+      toaster().setSettings({ placement, order });
+    });
+    act(() => {
+      toaster().informational('mockContentInfo', options);
+    });
+    act(() => {
+      toaster().positive('mockContentPositive', options);
+    });
+    assertAddedToast('mockContentInfo', 'informational', options);
+    assertAddedToast('mockContentPositive', 'positive', options);
+
+    const toasts = await screen.findAllByText(/mockContent/);
+
+    if (order === 'descending' || (order === 'auto' && placement === 'top')) {
+      expect(toasts[1]).toHaveTextContent('mockContentInfo');
+      expect(toasts[0]).toHaveTextContent('mockContentPositive');
+    } else {
+      expect(toasts[0]).toHaveTextContent('mockContentInfo');
+      expect(toasts[1]).toHaveTextContent('mockContentPositive');
+    }
+  },
+);
+
 it.each([
   'top-start',
   'top',
@@ -180,13 +187,12 @@ it.each([
   'bottom',
   'bottom-end',
 ] as const)('should change placement to %s', async (placement) => {
+  const toaster = toasterContraption();
   act(() => {
-    toaster.setSettings({
-      placement: placement,
-    });
+    toaster().setSettings({ placement });
   });
   act(() => {
-    toaster.informational('mockContent', mockedOptions());
+    toaster().informational('mockContent', mockedOptions());
   });
   expect(await screen.findByText('mockContent'));
   expect(document.querySelector('.iui-toast-wrapper')).toHaveClass(
diff --git a/packages/itwinui-react/src/core/Toast/Toaster.tsx b/packages/itwinui-react/src/core/Toast/Toaster.tsx
index 2d63bd621a0..69b6c3c5cb0 100644
--- a/packages/itwinui-react/src/core/Toast/Toaster.tsx
+++ b/packages/itwinui-react/src/core/Toast/Toaster.tsx
@@ -3,28 +3,27 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { getContainer, getDocument } from '../utils/index.js';
+import cx from 'classnames';
+import { Box, useSafeContext } from '../utils/index.js';
+import { Toast } from './Toast.js';
 import type { ToastCategory, ToastProps } from './Toast.js';
-import { ToastWrapper } from './ToastWrapper.js';
-import type { ToastWrapperHandle } from './ToastWrapper.js';
-
-const TOASTS_CONTAINER_ID = 'iui-toasts-container';
 
 export type ToasterSettings = {
   /**
    * Order of toasts.
    * When set to 'descending', most recent toasts are on top. When set to 'ascending', most recent toasts are on bottom.
-
-   * When `placement` is set to a top value, order defaults to 'descending', otherwise 'ascending'.
+   *
+   * When set to `auto`, it will behave like 'descending' when `placement` is set to a top value, otherwise 'ascending'.
+   *
+   * @default 'auto'
    */
-  order?: 'descending' | 'ascending';
+  order: 'descending' | 'ascending' | 'auto';
   /**
    * Placement of toasts.
    * Changes placement of toasts. Start indicates left side of viewport. End - right side of viewport.
    * @default 'top'
    */
-  placement?:
+  placement:
     | 'top'
     | 'top-start'
     | 'top-end'
@@ -38,140 +37,141 @@ export type ToastOptions = Omit<
   'category' | 'isVisible' | 'id' | 'content'
 >;
 
-export default class Toaster {
-  private toasts: ToastProps[] = [];
-  private lastId = 0;
-  private settings: ToasterSettings = {
-    order: 'descending',
-    placement: 'top',
+// ----------------------------------------------------------------------------
+
+export const useToaster = () => {
+  const dispatch = useSafeContext(ToasterDispatchContext);
+
+  const showToast = React.useCallback(
+    (category: ToastCategory) =>
+      (content: React.ReactNode, options?: ToastOptions) => {
+        const id = nextId();
+
+        dispatch({
+          type: 'add',
+          toast: { ...options, id, content, category },
+        });
+
+        return { close: () => dispatch({ type: 'remove', id }) };
+      },
+    [dispatch],
+  );
+
+  return {
+    positive: showToast('positive'),
+    informational: showToast('informational'),
+    negative: showToast('negative'),
+    warning: showToast('warning'),
+    closeAll: () => {
+      dispatch({ type: 'close-all' });
+    },
+    setSettings: (settings: Partial<ToasterSettings>) => {
+      dispatch({ type: 'settings', settings });
+    },
   };
-  private toastsRef = React.createRef<ToastWrapperHandle>();
-  private isInitialized = false;
-
-  // Create container on demand.
-  // Cannot do it in constructor, because SSG/SSR apps would fail.
-  private asyncInit = async () => {
-    if (this.isInitialized) {
-      return;
-    }
+};
 
-    const container = getContainer(TOASTS_CONTAINER_ID) ?? getDocument()?.body;
-    if (!container) {
-      return;
-    }
-    this.isInitialized = true;
-
-    const toastWrapper = <ToastWrapper ref={this.toastsRef} />;
-
-    const _ReactDOM = ReactDOM as any; // eslint-disable-line @typescript-eslint/no-explicit-any
-
-    // v18 mode
-    if (_ReactDOM.createRoot) {
-      const _ReactDOMInternals =
-        _ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-
-      // suppress warning about importing createRoot from react-dom/client
-      if (_ReactDOMInternals) {
-        _ReactDOMInternals.usingClientEntryPoint = true;
-      }
-
-      const root = _ReactDOM.createRoot(container);
-      root.render(toastWrapper);
-      // revert suppression, not to influence users app
-      if (_ReactDOMInternals) {
-        _ReactDOMInternals.usingClientEntryPoint = false;
-      }
-    } else {
-      // v17 and before
-      ReactDOM.render(toastWrapper, container);
+// ----------------------------------------------------------------------------
+
+export const Toaster = () => {
+  const { toasts, settings } = useSafeContext(ToasterStateContext);
+
+  return (
+    <Box
+      className={cx(`iui-toast-wrapper`, `iui-placement-${settings.placement}`)}
+    >
+      {toasts.map((toastProps) => {
+        return <Toast key={toastProps.id} {...toastProps} />;
+      })}
+    </Box>
+  );
+};
+
+// ----------------------------------------------------------------------------
+
+export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
+  const [toasterState, dispatch] = React.useReducer(toastReducer, {
+    toasts: [],
+    settings: {
+      order: 'auto',
+      placement: 'top',
+    },
+  });
+
+  return (
+    <ToasterDispatchContext.Provider value={dispatch}>
+      <ToasterStateContext.Provider value={toasterState}>
+        {children}
+      </ToasterStateContext.Provider>
+    </ToasterDispatchContext.Provider>
+  );
+};
+
+const toastReducer = (state: ToasterState, action: ToasterAction) => {
+  if (action.type === 'add') {
+    let order = state.settings.order;
+    if (order === 'auto') {
+      order = state.settings.placement.startsWith('top')
+        ? 'descending'
+        : 'ascending';
     }
-  };
 
-  /**
-   * Set global Toaster settings for toasts order and placement.
-   * Settings will be applied to new toasts on the page.
-   */
-  public setSettings(newSettings: ToasterSettings) {
-    newSettings.placement ??= this.settings.placement;
-    newSettings.order ??= newSettings.placement?.startsWith('bottom')
-      ? 'ascending'
-      : 'descending';
-    this.settings = newSettings;
-    this.asyncInit().then(() => {
-      this.toastsRef.current?.setPlacement(this.settings.placement ?? 'top');
-    });
+    return {
+      ...state,
+      toasts: [
+        ...(order === 'ascending' ? state.toasts : []),
+        action.toast,
+        ...(order === 'descending' ? state.toasts : []),
+      ],
+    };
   }
 
-  public positive(content: React.ReactNode, options?: ToastOptions) {
-    return this.createToast(content, 'positive', options);
+  if (action.type === 'remove') {
+    return {
+      ...state,
+      toasts: state.toasts.filter((toast) => toast.id !== action.id),
+    };
   }
 
-  public informational(content: React.ReactNode, options?: ToastOptions) {
-    return this.createToast(content, 'informational', options);
+  if (action.type === 'close-all') {
+    return {
+      ...state,
+      toasts: state.toasts.map((toast) => ({ ...toast, isVisible: false })),
+    };
   }
 
-  public negative(content: React.ReactNode, options?: ToastOptions) {
-    return this.createToast(content, 'negative', options);
+  if (action.type === 'settings') {
+    return { ...state, settings: { ...state.settings, ...action.settings } };
   }
 
-  public warning(content: React.ReactNode, options?: ToastOptions) {
-    return this.createToast(content, 'warning', options);
-  }
+  return state;
+};
 
-  private createToast(
-    content: React.ReactNode,
-    category: ToastCategory,
-    options?: ToastOptions,
-  ) {
-    ++this.lastId;
-    const currentId = this.lastId;
-    this.toasts = [
-      ...(this.settings.order === 'ascending' ? this.toasts : []),
-      {
-        ...options,
-        content,
-        category,
-        onRemove: () => {
-          this.removeToast(currentId);
-          options?.onRemove?.();
-        },
-        id: currentId,
-        isVisible: true,
-      },
-      ...(this.settings.order === 'descending' ? this.toasts : []),
-    ];
-    this.updateView();
-    return { close: () => this.closeToast(currentId) };
-  }
+// ----------------------------------------------------------------------------
 
-  private removeToast(id: number) {
-    this.toasts = this.toasts.filter((toast) => toast.id !== id);
-    this.updateView();
-  }
+export const ToasterStateContext = React.createContext<
+  ToasterState | undefined
+>(undefined);
+ToasterStateContext.displayName = 'ToasterStateContext';
 
-  private updateView() {
-    this.asyncInit().then(() => {
-      this.toastsRef.current?.setToasts(this.toasts);
-    });
-  }
+type ToasterState = { toasts: ToastProps[]; settings: ToasterSettings };
 
-  private closeToast(toastId: number): void {
-    this.toasts = this.toasts.map((toast) => {
-      return {
-        ...toast,
-        isVisible: toast.id !== toastId,
-      };
-    });
-    this.updateView();
-  }
+// ----------------------------------------------------------------------------
 
-  public closeAll(): void {
-    this.toasts = this.toasts.map((toast) => {
-      return {
-        ...toast,
-        isVisible: false,
-      };
-    });
-    this.updateView();
-  }
-}
+const ToasterDispatchContext = React.createContext<
+  React.Dispatch<ToasterAction> | undefined
+>(undefined);
+ToasterDispatchContext.displayName = 'ToasterDispatchContext';
+
+type ToasterAction =
+  | { type: 'add'; toast: ToastProps }
+  | { type: 'remove'; id: number }
+  | { type: 'close-all' }
+  | { type: 'settings'; settings: Partial<ToasterSettings> };
+
+// ----------------------------------------------------------------------------
+
+const nextId = (() => {
+  let count = 0;
+  return () => ++count;
+})();
diff --git a/packages/itwinui-react/src/core/Toast/index.ts b/packages/itwinui-react/src/core/Toast/index.ts
index 1eb04ee7a17..d050474f466 100644
--- a/packages/itwinui-react/src/core/Toast/index.ts
+++ b/packages/itwinui-react/src/core/Toast/index.ts
@@ -2,9 +2,4 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import Toaster from './Toaster.js';
-export type { ToastOptions } from './Toaster.js';
-
-const toaster = new Toaster();
-
-export default toaster;
+export { useToaster } from './Toaster.js';
diff --git a/packages/itwinui-react/src/core/index.ts b/packages/itwinui-react/src/core/index.ts
index 34f8e6c370a..394ec5ed3d3 100644
--- a/packages/itwinui-react/src/core/index.ts
+++ b/packages/itwinui-react/src/core/index.ts
@@ -164,8 +164,7 @@ export { Tile } from './Tile/index.js';
 export { TimePicker } from './TimePicker/index.js';
 export type { MeridiemType } from './TimePicker/index.js';
 
-export { default as toaster } from './Toast/index.js';
-export type { ToastOptions } from './Toast/index.js';
+export { useToaster } from './Toast/index.js';
 
 export { ThemeProvider } from './ThemeProvider/index.js';
 export type { ThemeType } from './ThemeProvider/index.js';
diff --git a/packages/itwinui-react/src/core/utils/functions/dom.test.tsx b/packages/itwinui-react/src/core/utils/functions/dom.test.tsx
index b2d6dbba506..fb4a70cce47 100644
--- a/packages/itwinui-react/src/core/utils/functions/dom.test.tsx
+++ b/packages/itwinui-react/src/core/utils/functions/dom.test.tsx
@@ -4,38 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
-import {
-  getContainer,
-  getDocument,
-  getWindow,
-  mergeEventHandlers,
-} from './dom.js';
-
-describe('getContainer', () => {
-  it('should create container', () => {
-    const container = getContainer('test-id');
-    expect(document.getElementById('test-id')).toBeTruthy();
-    expect(getContainer('test-id')).toBe(container);
-  });
-
-  it('should respect ownerDocument arg', () => {
-    const mockDocument = new DOMParser().parseFromString(
-      `<!DOCTYPE html><html><body></body></html>`,
-      'text/html',
-    );
-
-    const container = getContainer('test-id', mockDocument);
-    expect(mockDocument.getElementById('test-id')).toBeTruthy();
-    expect(getContainer('test-id', mockDocument)).toBe(container);
-    expect(getContainer('test-id', document)).not.toBe(container);
-  });
-
-  it('should append to iui-root if it exists', () => {
-    document.body.innerHTML = `<div class="iui-root"></div>`;
-    getContainer('test-id');
-    expect(document.querySelector('.iui-root > #test-id')).toBeTruthy();
-  });
-});
+import { getDocument, getWindow, mergeEventHandlers } from './dom.js';
 
 describe('getDocument', () => {
   it('should get document when it is defined', () => {
diff --git a/packages/itwinui-react/src/core/utils/functions/dom.ts b/packages/itwinui-react/src/core/utils/functions/dom.ts
index e5d8c9ddce1..a92cd89dc72 100644
--- a/packages/itwinui-react/src/core/utils/functions/dom.ts
+++ b/packages/itwinui-react/src/core/utils/functions/dom.ts
@@ -3,31 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 
-import styles from '../../../styles.js';
-
-/**
- * Get the container as a child of body, or create one if it doesn't exist.
- * Mostly used for dynamic components like Modal or Toast.
- *
- * @param containerId id of the container to find or create
- * @param ownerDocument Can be changed if the container should be in a different document (e.g. in popup).
- */
-export const getContainer = (
-  containerId: string,
-  ownerDocument = getDocument(),
-) => {
-  let container = ownerDocument?.getElementById(containerId) ?? undefined;
-  if (container == null && !!ownerDocument) {
-    container = ownerDocument.createElement('div');
-    container.setAttribute('id', containerId);
-    const root =
-      ownerDocument.querySelector(`.${styles['iui-root']}`) ??
-      ownerDocument.body;
-    root.appendChild(container);
-  }
-  return container;
-};
-
 /**
  * Get document if it is defined.
  * Used to support SSR/SSG applications.