diff --git a/apps/web-twig-demo/assets/scripts/toast-dynamic.ts b/apps/web-twig-demo/assets/scripts/toast-dynamic.ts
index 2d0061596d..3c0dde72c6 100644
--- a/apps/web-twig-demo/assets/scripts/toast-dynamic.ts
+++ b/apps/web-twig-demo/assets/scripts/toast-dynamic.ts
@@ -6,11 +6,17 @@ const addDynamicToast = (event, containerId) => {
     autoCloseInterval: formElement.querySelector('#toast-auto-close-interval').value,
     color: formElement.querySelector('#toast-color').value,
     containerId,
-    content: formElement.querySelector('#toast-content').value,
     enableAutoClose: formElement.querySelector('#toast-enable-auto-close').checked,
     hasIcon: formElement.querySelector('#toast-has-icon').checked,
     id: `my-dynamic-toast-${Date.now()}`,
     isDismissible: formElement.querySelector('#toast-is-dismissible').checked,
+    message: formElement.querySelector('#toast-message').value,
+    linkContent: formElement.querySelector('#toast-enable-link').checked
+      ? formElement.querySelector('#toast-link').value
+      : null,
+    linkProps: {
+      href: '#',
+    },
   };
 
   const toast = new Toast(null, config);
diff --git a/packages/web-react/src/components/Toast/README.md b/packages/web-react/src/components/Toast/README.md
index 1cb89cf1a8..eda3fd157f 100644
--- a/packages/web-react/src/components/Toast/README.md
+++ b/packages/web-react/src/components/Toast/README.md
@@ -8,6 +8,8 @@ Toast is a composition of a few subcomponents:
 
 - [Toast](#toast)
   - [ToastBar](#toastbar)
+    - [ToastBarMessage](#toastbarmessage)
+    - [ToastBarLink](#toastbarlink)
 - [UncontrolledToast](#uncontrolledToast)
 
 ## Toast
@@ -150,11 +152,11 @@ elements.
 Minimum example:
 
 ```jsx
-import { ToastBar } from '@lmc-eu/spirit-web-react/components';
-```
+import { ToastBar, ToastBarMessage } from '@lmc-eu/spirit-web-react/components';
 
-```jsx
-<ToastBar id="my-toast">Message only</ToastBar>
+<ToastBar id="my-toast">
+  <ToastBarMessage>Message only</ToastBarMessage>
+</ToastBar>;
 ```
 
 ### Optional Icon
@@ -163,7 +165,7 @@ An icon can be displayed in the ToastBar component, depending on the color of th
 
 ```jsx
 <ToastBar id="my-toast" color="success" hasIcon>
-  Message with icon
+  <ToastBarMessage>Message with icon</ToastBarMessage>
 </ToastBar>
 ```
 
@@ -171,7 +173,7 @@ Alternatively, a custom icon can be used:
 
 ```jsx
 <ToastBar id="my-toast" iconName="download">
-  Message with custom icon
+  <ToastBarMessage>Message with custom icon</ToastBarMessage>
 </ToastBar>
 ```
 
@@ -185,21 +187,59 @@ Alternatively, a custom icon can be used:
 | `success`     | `check-plain` |
 | `warning`     | `warning`     |
 
-### Action Link
+### ToastBar Components
+
+The content of `ToastBar` can be assembled from the following subcomponents:
 
-An action link can be added to the ToastBar component:
+#### ToastBarMessage
+
+`ToastBarMessage` is a subcomponent designated for the main message in `ToastBar`.
+
+Usage example:
 
 ```jsx
-<ToastBar id="my-toast">
-  Message with action
-  <Link href="#" color="inverted" isUnderlined>
-    Action
-  </Link>
+<ToastBar id="my-toast" isOpen={isOpen} onClose={() => setIsOpen(false)} isDismissible>
+  <ToastBarMessage>This is the main toast message.</ToastBarMessage>
 </ToastBar>
 ```
 
-👉 For the sake of flexibility, developers can pass the link as part of the message. However, it is strongly recommended
-to use the **inverted underlined** variant of the link (for all ToastBar colors) to make it stand out from the message.
+#### API
+
+| Name       | Type        | Default | Required | Description                    |
+| ---------- | ----------- | ------- | -------- | ------------------------------ |
+| `children` | `ReactNode` | —       | ✓        | Content of the ToastBarMessage |
+
+On top of the API options, the components accept [additional attributes][readme-additional-attributes].
+If you need more control over the styling of a component, you can use [style props][readme-style-props]
+and [escape hatches][readme-escape-hatches].
+
+#### ToastBarLink
+
+`ToastBarLink` is a subcomponent designated to create an action link within `ToastBar`.
+
+Usage example:
+
+```jsx
+<ToastBar id="my-toast" isOpen={isOpen} onClose={() => setIsOpen(false)} isDismissible>
+  <ToastBarLink href="#">This is the action link.</ToastBarLink>
+</ToastBar>
+```
+
+#### API
+
+| Name           | Type                                             | Default    | Required | Description                    |
+| -------------- | ------------------------------------------------ | ---------- | -------- | ------------------------------ |
+| `children`     | `ReactNode`                                      | —          | ✓        | Content of the ToastBarLink    |
+| `color`        | [Action Link Color dictionary][dictionary-color] | `inverted` | ✕        | Color of the link              |
+| `elementType`  | `ElementType`                                    | `a`        | ✕        | Type of element used as        |
+| `href`         | `string`                                         | —          | ✕        | ToastBarLink's href attribute  |
+| `isDisabled`   | `bool`                                           | `false`    | ✕        | Whether is the link disabled   |
+| `isUnderlined` | `bool`                                           | `true`     | ✕        | Whether is the link underlined |
+| `ref`          | `ForwardedRef<HTMLAnchorElement>`                | —          | ✕        | Link element reference         |
+
+On top of the API options, the components accept [additional attributes][readme-additional-attributes].
+If you need more control over the styling of a component, you can use [style props][readme-style-props]
+and [escape hatches][readme-escape-hatches].
 
 👉 **Do not put any important actions** like "Undo" in the ToastBar component (unless there are other means to perform
 said action), as it is very hard (if not impossible) to reach for users with assistive technologies. Read more about
@@ -213,9 +253,11 @@ Use the `color` option to change the color of the ToastBar component.
 For example:
 
 ```jsx
+import { ToastBarMessage } from '@lmc-eu/spirit-web-react/components';
+
 <ToastBar id="my-toast" color="success">
-  Success message
-</ToastBar>
+  <ToastBarMessage>Success message</ToastBarMessage>
+</ToastBar>;
 ```
 
 ### Opening the ToastBar
@@ -224,7 +266,7 @@ Set `isOpen` prop to `true` to open a Toast **that is present in the DOM,** e.g.
 
 ```jsx
 <ToastBar id="my-toast" isOpen>
-  Opened ToastBar
+  <ToastBarMessage>Opened ToastBar</ToastBarMessage>
 </ToastBar>
 ```
 
@@ -236,7 +278,7 @@ To make the ToastBar dismissible, add the `isDismissible` prop along with a `onC
 
 ```jsx
 <ToastBar id="my-toast" onClose={() => {}} isDismissible>
-  Dismissible message
+  <ToastBarMessage>Dismissible message</ToastBarMessage>
 </ToastBar>
 ```
 
@@ -248,7 +290,7 @@ To make the ToastBar dismissible, add the `isDismissible` prop along with a `onC
 | `color`         | [[Emotion Color dictionary][dictionary-color] \| `inverted`] | `inverted` | ✕        | Color variant                                       |
 | `hasIcon`       | `bool`                                                       | `false` \* | ✕        | If true, an icon is shown along the message         |
 | `iconName`      | `string`                                                     | `info` \*  | ✕        | Name of a custom icon to be shown along the message |
-| `id`            | `string`                                                     | —          | ✔        | ToastBar ID                                         |
+| `id`            | `string`                                                     | —          | ✓        | ToastBar ID                                         |
 | `isDismissible` | `bool`                                                       | `false`    | ✕        | If true, ToastBar can be dismissed by user          |
 | `isOpen`        | `bool`                                                       | `true`     | ✕        | If true, ToastBar is visible                        |
 | `onClose`       | `function`                                                   | —          | ✕        | Close button callback                               |
@@ -264,9 +306,9 @@ and [escape hatches][readme-escape-hatches].
 ## Full Example
 
 ```jsx
-import { Button, Toast, ToastBar } from '@lmc-eu/spirit-web-react/components';
+import { Button, Toast, ToastBar, ToastBarMessage, ToastBarLink } from '@lmc-eu/spirit-web-react/components';
 
-const [isOpen, setIsOpen] = React.useState(false)
+const [isOpen, setIsOpen] = useState(false);
 
 <Button onClick={() => setIsOpen(true)} aria-expanded={isOpen} aria-controls="my-toast">
   {buttonLabel}
@@ -274,8 +316,8 @@ const [isOpen, setIsOpen] = React.useState(false)
 
 <Toast>
   <ToastBar id="my-toast" isOpen={isOpen} onClose={() => setIsOpen(false)} isDismissible>
-    Toast message
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Toast message</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
   </ToastBar>
 </Toast>
 ```
@@ -348,17 +390,25 @@ All other options are not required and can be omitted entirely.
 ```jsx
 const { show } = useToast();
 
-         ┌─⫸ Message inside UncontrolledToast (required)
-         │
-         │                 ┌─⫸ ToastBar ID (required)
-         │                 │
-show('Toast message', 'toast-id', {
-  autoCloseInterval: 3000  // Set interval in ms after ToastBar will be closed, default: 3000
+                            ┌─⫸ Message inside UncontrolledToast (required)
+                            │                       ┌─⫸ Link text inside UncontrolledToast (required)
+                            │                       │                ┌─⫸ ToastBar ID (required)
+                            │                       │                │
+show({content: { message: 'Toast message', link: 'Link action' }}, 'toast-id', {
+  autoCloseInterval: 3000,  // Set interval in ms after ToastBar will be closed, default: 3000
   color: 'danger',         // Color variant, default: 'inverted'
-  enableAutoClose: true    // If true, ToastBar will close after `autoCloseInterval`, default: true
-  hasIcon: true            // If true, an icon is shown along the message, default: false \*
+  enableAutoClose: true,    // If true, ToastBar will close after `autoCloseInterval`, default: true
+  hasIcon: true,            // If true, an icon is shown along the message, default: false \*
   iconName: 'download',    // Name of a custom icon to be shown along the message, default: undefined
   isDismissible: true      // If true, ToastBar can be dismissed by user, default: false
+  linkProps: {             // Props for the link
+    href: 'https://example.com', // Link URL
+    target: '_blank',      // Optional link target attribute
+    isUnderlined: false,   // Optional link underlining, default: true
+    isDisabled: false,     // Optional link disabling, default: false
+    elementType: 'a',      // Optional link element type, default: 'a'
+    color: 'inverted',     // Optional link color variant, default: 'inverted'
+  },
 });
 ```
 
diff --git a/packages/web-react/src/components/Toast/ToastBar.tsx b/packages/web-react/src/components/Toast/ToastBar.tsx
index 0a25b9b635..46759098de 100644
--- a/packages/web-react/src/components/Toast/ToastBar.tsx
+++ b/packages/web-react/src/components/Toast/ToastBar.tsx
@@ -34,7 +34,6 @@ const ToastBar = (props: SpiritToastBarProps) => {
     ...restProps,
     color,
     isDismissible,
-    id,
   });
   const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
 
@@ -44,15 +43,15 @@ const ToastBar = (props: SpiritToastBarProps) => {
         <div
           {...styleProps}
           {...otherProps}
+          id={id}
           className={classNames(classProps.root, TRANSITIONING_STYLES[transitionState], styleProps.className)}
           ref={rootElementRef}
         >
           <div className={classProps.box}>
-            <div className={classProps.content}>
+            <div className={classProps.container}>
               {(hasIcon || iconName) && <Icon name={toastIconName} boxSize={ICON_BOX_SIZE} />}
-              <div className={classProps.message}>{children}</div>
+              <div className={classProps.content}>{children}</div>
             </div>
-
             <ToastCloseButton
               id={id}
               color={color}
diff --git a/packages/web-react/src/components/Toast/ToastBarLink.tsx b/packages/web-react/src/components/Toast/ToastBarLink.tsx
new file mode 100644
index 0000000000..87925e287c
--- /dev/null
+++ b/packages/web-react/src/components/Toast/ToastBarLink.tsx
@@ -0,0 +1,40 @@
+import React, { ElementType, ForwardedRef, forwardRef } from 'react';
+import classNames from 'classnames';
+import { ActionLinkColors } from '../../constants';
+import { useStyleProps } from '../../hooks';
+import { SpiritLinkProps } from '../../types';
+import { Link } from '../Link';
+import { useToastBarStyleProps } from './useToastBarStyleProps';
+
+const defaultProps: Partial<SpiritLinkProps> = {
+  color: ActionLinkColors.INVERTED,
+  isUnderlined: true,
+};
+
+/* We need an exception for components exported with forwardRef */
+/* eslint no-underscore-dangle: ['error', { allow: ['_ToastBarLink'] }] */
+const _ToastBarLink = <E extends ElementType = typeof Link, C = void>(
+  props: SpiritLinkProps<E, C>,
+  ref: ForwardedRef<HTMLAnchorElement>,
+) => {
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { children, ...restProps } = propsWithDefaults;
+  const { classProps, props: modifiedProps } = useToastBarStyleProps({ ...restProps });
+  const { styleProps, props: otherProps } = useStyleProps(modifiedProps);
+
+  return (
+    <Link
+      {...propsWithDefaults}
+      {...otherProps}
+      ref={ref}
+      UNSAFE_className={classNames(classProps.link, styleProps.className)}
+      UNSAFE_style={styleProps.style}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export const ToastBarLink = forwardRef<HTMLAnchorElement, SpiritLinkProps<ElementType>>(_ToastBarLink);
+
+export default ToastBarLink;
diff --git a/packages/web-react/src/components/Toast/ToastBarMessage.tsx b/packages/web-react/src/components/Toast/ToastBarMessage.tsx
new file mode 100644
index 0000000000..291de43785
--- /dev/null
+++ b/packages/web-react/src/components/Toast/ToastBarMessage.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useClassNamePrefix, useStyleProps } from '../../hooks';
+import { ChildrenProps } from '../../types';
+
+const ToastBarMessage = (props: ChildrenProps) => {
+  const { children, ...restProps } = props;
+  const { styleProps, props: otherProps } = useStyleProps(restProps);
+
+  return (
+    <div
+      {...styleProps}
+      {...otherProps}
+      className={classNames(useClassNamePrefix('text-truncate-multiline'), styleProps.className)}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default ToastBarMessage;
diff --git a/packages/web-react/src/components/Toast/ToastContext.tsx b/packages/web-react/src/components/Toast/ToastContext.tsx
index 72112d46ac..9f398672ab 100644
--- a/packages/web-react/src/components/Toast/ToastContext.tsx
+++ b/packages/web-react/src/components/Toast/ToastContext.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode, createContext, useCallback, useMemo, useReducer } from 'react';
-import { ToastColorType } from '../../types';
+import { LinkProps, ToastColorType } from '../../types';
 import { delayedCallback } from '../../utils';
 import { DEFAULT_TOAST_AUTO_CLOSE_INTERVAL } from './constants';
 
@@ -16,7 +16,11 @@ export interface ToastItem {
   id: string;
   isDismissible: boolean;
   isOpen: boolean;
-  message: string | JSX.Element;
+  linkProps: LinkProps;
+  content: {
+    message: JSX.Element | string;
+    link?: JSX.Element | string;
+  };
 }
 
 export interface ToastContextType extends ToastState {
@@ -24,7 +28,10 @@ export interface ToastContextType extends ToastState {
   hide: (id: string) => void;
   setQueue: (newQueue: ToastItem[]) => void;
   show: (
-    text: string | JSX.Element,
+    content: {
+      message: JSX.Element | string;
+      link?: JSX.Element | string;
+    },
     id: string,
     options?: {
       autoCloseInterval?: number;
@@ -33,6 +40,7 @@ export interface ToastContextType extends ToastState {
       hasIcon?: boolean;
       iconName?: string;
       isDismissible?: boolean;
+      linkProps: LinkProps;
     },
   ) => void;
 }
@@ -51,7 +59,10 @@ type ActionType =
   | {
       type: 'show';
       payload: {
-        text: string | JSX.Element;
+        content: {
+          message: JSX.Element | string;
+          link?: JSX.Element | string;
+        };
         toastId: string;
         options?: {
           autoCloseInterval?: number;
@@ -60,6 +71,7 @@ type ActionType =
           hasIcon?: boolean;
           iconName?: string;
           isDismissible?: boolean;
+          linkProps: LinkProps;
         };
       };
     }
@@ -83,8 +95,12 @@ const reducer = (state: ToastState, action: ActionType): ToastState => {
           iconName: payload.options?.iconName,
           id: payload.toastId,
           isDismissible: payload.options?.isDismissible || false,
+          linkProps: payload.options?.linkProps || {},
           isOpen: true,
-          message: payload.text,
+          content: {
+            message: payload.content.message,
+            link: payload.content.link || undefined,
+          },
         },
       ];
 
@@ -125,7 +141,10 @@ export const ToastProvider: FC<ToastProviderProps> = ({ children }) => {
 
   const show = useCallback(
     (
-      text: string | JSX.Element,
+      content: {
+        message: JSX.Element | string;
+        link?: JSX.Element | string;
+      },
       toastId: string,
       options?: {
         autoCloseInterval?: number;
@@ -134,9 +153,10 @@ export const ToastProvider: FC<ToastProviderProps> = ({ children }) => {
         hasIcon?: boolean;
         iconName?: string;
         isDismissible?: boolean;
+        linkProps: LinkProps;
       },
     ) => {
-      dispatch({ type: 'show', payload: { text, toastId, options } });
+      dispatch({ type: 'show', payload: { content, toastId, options } });
 
       options?.enableAutoClose &&
         delayedCallback(() => hide(toastId), options?.autoCloseInterval || DEFAULT_TOAST_AUTO_CLOSE_INTERVAL);
@@ -153,7 +173,10 @@ export const ToastProvider: FC<ToastProviderProps> = ({ children }) => {
       dispatch({
         type: 'show',
         payload: {
-          text: item.message,
+          content: {
+            message: item.content.message,
+            link: item.content.link ?? undefined,
+          },
           toastId: item.id,
           options: {
             autoCloseInterval,
@@ -162,6 +185,7 @@ export const ToastProvider: FC<ToastProviderProps> = ({ children }) => {
             hasIcon: item.hasIcon || false,
             iconName: item.iconName,
             isDismissible: item.isDismissible || false,
+            linkProps: item.linkProps || {},
           },
         },
       });
diff --git a/packages/web-react/src/components/Toast/UncontrolledToast.tsx b/packages/web-react/src/components/Toast/UncontrolledToast.tsx
index 510f31c370..1580710a85 100644
--- a/packages/web-react/src/components/Toast/UncontrolledToast.tsx
+++ b/packages/web-react/src/components/Toast/UncontrolledToast.tsx
@@ -3,6 +3,7 @@ import { UncontrolledToastProps } from '../../types';
 import Toast from './Toast';
 import ToastBar from './ToastBar';
 import { useToast } from './useToast';
+import { ToastBarLink, ToastBarMessage } from '.';
 
 const UncontrolledToast = (props: UncontrolledToastProps) => {
   const { alignmentX, alignmentY, isCollapsible, closeLabel, ...restProps } = props;
@@ -11,7 +12,7 @@ const UncontrolledToast = (props: UncontrolledToastProps) => {
   return (
     <Toast alignmentX={alignmentX} alignmentY={alignmentY} isCollapsible={isCollapsible}>
       {queue.map((item) => {
-        const { color, iconName, id, isOpen, message, hasIcon, isDismissible } = item;
+        const { color, iconName, id, isOpen, content, hasIcon, isDismissible, linkProps } = item;
 
         return (
           <ToastBar
@@ -24,9 +25,10 @@ const UncontrolledToast = (props: UncontrolledToastProps) => {
             iconName={iconName}
             isDismissible={isDismissible}
             onClose={() => hide(id)}
-            isOpen={isOpen && !!message}
+            isOpen={isOpen && !!content}
           >
-            {message}
+            <ToastBarMessage>{content.message}</ToastBarMessage>
+            {content.link && <ToastBarLink {...linkProps}>{content.link}</ToastBarLink>}
           </ToastBar>
         );
       })}
diff --git a/packages/web-react/src/components/Toast/__tests__/ToastBar.test.tsx b/packages/web-react/src/components/Toast/__tests__/ToastBar.test.tsx
index 1a0ecd71dd..726bb443b6 100644
--- a/packages/web-react/src/components/Toast/__tests__/ToastBar.test.tsx
+++ b/packages/web-react/src/components/Toast/__tests__/ToastBar.test.tsx
@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
@@ -27,14 +27,19 @@ describe('ToastBar', () => {
     const element = dom.container.querySelector('div') as HTMLElement;
 
     expect(element).toBeInTheDocument();
+    expect(element).toHaveClass('ToastBar');
+    expect(element).toHaveClass('ToastBar--inverted');
   });
 
   it('should render text children', () => {
-    const dom = render(<ToastBar id="test">Hello World</ToastBar>);
+    render(<ToastBar id="test">Hello World</ToastBar>);
 
-    const element = dom.container.querySelector('div') as HTMLElement;
+    const element = screen.getByText('Hello World');
 
-    expect(element.textContent).toBe('Hello World');
+    expect(element).toBeInTheDocument();
+    expect(element).toHaveClass('ToastBar__content');
+    expect(element).toContainHTML('div');
+    expect(element.parentElement).toHaveClass('ToastBar__container');
   });
 
   it('should render icon and have danger class', () => {
diff --git a/packages/web-react/src/components/Toast/__tests__/ToastBarLink.test.tsx b/packages/web-react/src/components/Toast/__tests__/ToastBarLink.test.tsx
new file mode 100644
index 0000000000..4053bcf35c
--- /dev/null
+++ b/packages/web-react/src/components/Toast/__tests__/ToastBarLink.test.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
+import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
+import ToastBarLink from '../ToastBarLink';
+
+describe('ToastBarLink', () => {
+  stylePropsTest(ToastBarLink);
+
+  restPropsTest(ToastBarLink, 'a');
+
+  beforeEach(() => {
+    render(<ToastBarLink href="#example-href">Example action</ToastBarLink>);
+  });
+
+  it('should render with correct href', () => {
+    const element = screen.getByRole('link');
+
+    expect(element).toBeInTheDocument();
+    expect(element).toHaveAttribute('href', '#example-href');
+  });
+
+  it('should render children', () => {
+    expect(screen.getByText('Example action')).toBeInTheDocument();
+  });
+
+  it('should render with correct classnames', () => {
+    const element = screen.getByRole('link');
+
+    expect(element).toHaveClass('link-inverted');
+    expect(element).toHaveClass('link-underlined');
+    expect(element).toHaveClass('ToastBar__link');
+  });
+});
diff --git a/packages/web-react/src/components/Toast/__tests__/ToastBarMessage.test.tsx b/packages/web-react/src/components/Toast/__tests__/ToastBarMessage.test.tsx
new file mode 100644
index 0000000000..feed9f17c2
--- /dev/null
+++ b/packages/web-react/src/components/Toast/__tests__/ToastBarMessage.test.tsx
@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import ToastBarMessage from '../ToastBarMessage';
+import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
+import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
+
+describe('ToastBarMessage', () => {
+  stylePropsTest(ToastBarMessage);
+
+  restPropsTest(ToastBarMessage, 'div');
+
+  beforeEach(() => {
+    render(<ToastBarMessage>Example children</ToastBarMessage>);
+  });
+
+  it('should render children', () => {
+    expect(screen.getByText('Example children')).toBeInTheDocument();
+  });
+
+  it('should render with truncate className', () => {
+    expect(screen.getByText('Example children')).toHaveClass('text-truncate-multiline');
+  });
+});
diff --git a/packages/web-react/src/components/Toast/__tests__/UncontrolledToast.test.tsx b/packages/web-react/src/components/Toast/__tests__/UncontrolledToast.test.tsx
index 3be55b8b9f..9874de7957 100644
--- a/packages/web-react/src/components/Toast/__tests__/UncontrolledToast.test.tsx
+++ b/packages/web-react/src/components/Toast/__tests__/UncontrolledToast.test.tsx
@@ -3,15 +3,24 @@ import { render } from '@testing-library/react';
 import React from 'react';
 import UncontrolledToast from '../UncontrolledToast';
 import { ToastContext } from '../ToastContext';
+import { LinkProps } from '../../../types';
 
 const defaultToast = {
   id: 'test-id',
-  message: 'Toast message',
+  content: {
+    message: 'Toast message',
+    link: 'Toast link',
+  },
   isOpen: false,
   iconName: undefined,
   hasIcon: false,
   isDismissible: false,
   color: undefined,
+  linkProps: {
+    href: '#',
+    color: 'inverted',
+    isUnderlined: true,
+  } as LinkProps,
 };
 
 const defaultContextValue = {
@@ -53,7 +62,7 @@ describe('UncontrolledToast', () => {
     expect(elementToast).toBeInTheDocument();
     expect(elementToastBar).toBeInTheDocument();
     expect(elementToastBar).toHaveClass('is-open ToastBar--inverted');
-    expect(elementToastBar.querySelector('.ToastBar .ToastBar__content svg')).not.toBeInTheDocument();
+    expect(elementToastBar.querySelector('.ToastBar .ToastBar__container svg')).not.toBeInTheDocument();
   });
 
   it('should render opened toast with params', () => {
@@ -75,7 +84,7 @@ describe('UncontrolledToast', () => {
     expect(elementToastBar).toBeInTheDocument();
     expect(elementToast).toHaveClass('Toast--right Toast--top');
     expect(elementToastBar).toHaveClass('ToastBar ToastBar--inverted ToastBar--dismissible is-open');
-    expect(elementToastBar.querySelector('.ToastBar__content svg')).toBeInTheDocument();
+    expect(elementToastBar.querySelector('.ToastBar__container svg')).toBeInTheDocument();
     expect(elementToastBar.querySelector('button')).toHaveTextContent('Close test');
   });
 
diff --git a/packages/web-react/src/components/Toast/__tests__/useToastBarStyleProps.test.ts b/packages/web-react/src/components/Toast/__tests__/useToastBarStyleProps.test.ts
index 7b330d2ecc..cbe00d6e76 100644
--- a/packages/web-react/src/components/Toast/__tests__/useToastBarStyleProps.test.ts
+++ b/packages/web-react/src/components/Toast/__tests__/useToastBarStyleProps.test.ts
@@ -9,7 +9,7 @@ describe('useToastBarStyleProps', () => {
 
     expect(result.current.classProps.root).toBe('ToastBar ToastBar--inverted');
     expect(result.current.classProps.content).toBe('ToastBar__content');
-    expect(result.current.classProps.message).toBe('ToastBar__message');
+    expect(result.current.classProps.container).toBe('ToastBar__container');
   });
 
   it('should return dismissible class', () => {
diff --git a/packages/web-react/src/components/Toast/demo/ToastColors.tsx b/packages/web-react/src/components/Toast/demo/ToastColors.tsx
index 3c3b4d8ecb..ee0dc733a3 100644
--- a/packages/web-react/src/components/Toast/demo/ToastColors.tsx
+++ b/packages/web-react/src/components/Toast/demo/ToastColors.tsx
@@ -1,39 +1,30 @@
 import React from 'react';
-import { Link } from '../../Link';
 import ToastBar from '../ToastBar';
+import ToastBarLink from '../ToastBarLink';
+import ToastBarMessage from '../ToastBarMessage';
 
 const ToastColors = () => {
   return (
     <>
       <ToastBar id="inverted" onClose={() => {}} color="inverted" hasIcon isDismissible>
-        Inverted
-        <Link href="#" color="inverted" isUnderlined>
-          Action
-        </Link>
+        <ToastBarMessage>Inverted</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
       </ToastBar>
       <ToastBar id="informative" onClose={() => {}} color="informative" hasIcon isDismissible>
-        Informative
-        <Link href="#" color="inverted" isUnderlined>
-          Action
-        </Link>
+        <ToastBarMessage>Informative</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
       </ToastBar>
       <ToastBar id="success" onClose={() => {}} color="success" hasIcon isDismissible>
-        Success
-        <Link href="#" color="inverted" isUnderlined>
-          Action
-        </Link>
+        <ToastBarMessage>Success</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
       </ToastBar>
       <ToastBar id="warning" onClose={() => {}} color="warning" hasIcon isDismissible>
-        Warning
-        <Link href="#" color="inverted" isUnderlined>
-          Action
-        </Link>
+        <ToastBarMessage>Warning</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
       </ToastBar>
       <ToastBar id="danger" onClose={() => {}} color="danger" hasIcon isDismissible>
-        Danger
-        <Link href="#" color="inverted" isUnderlined>
-          Action
-        </Link>
+        <ToastBarMessage>Danger</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
       </ToastBar>
     </>
   );
diff --git a/packages/web-react/src/components/Toast/demo/ToastContentVariations.tsx b/packages/web-react/src/components/Toast/demo/ToastContentVariations.tsx
index 0c6515b4d5..efeef6f946 100644
--- a/packages/web-react/src/components/Toast/demo/ToastContentVariations.tsx
+++ b/packages/web-react/src/components/Toast/demo/ToastContentVariations.tsx
@@ -1,37 +1,34 @@
 import React from 'react';
-import { Link } from '../../Link';
 import ToastBar from '../ToastBar';
+import ToastBarLink from '../ToastBarLink';
+import ToastBarMessage from '../ToastBarMessage';
 
 const ToastContentVariations = () => {
   return (
     <>
-      <ToastBar id="message-only">Message only</ToastBar>
+      <ToastBar id="message-only">
+        <ToastBarMessage>Message only</ToastBarMessage>
+      </ToastBar>
       <ToastBar id="with-action">
-        Message with action
-        <Link href="#" color="inverted" isUnderlined>
-          Action
-        </Link>
+        <ToastBarMessage>Message with action</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
       </ToastBar>
       <ToastBar id="long-text">
-        When the text is long and reaches the maximum width limit, the action automatically wraps to the next line.
-        <Link href="#" color="inverted" isUnderlined>
-          Action
-        </Link>
+        <ToastBarMessage>
+          When the text is long and reaches the maximum width limit, the action automatically wraps to the next line.
+        </ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
       </ToastBar>
       <ToastBar id="with-icon" hasIcon>
-        Message with icon and action
-        <Link href="#" color="inverted" isUnderlined>
-          Action
-        </Link>
+        <ToastBarMessage>Message with icon and action</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
       </ToastBar>
       <ToastBar id="dismissible" onClose={() => {}} isDismissible>
-        Dismissible message
+        <ToastBarMessage>Dismissible message</ToastBarMessage>
       </ToastBar>
       <ToastBar id="custom-icon" isDismissible iconName="download">
-        Dismissible message with custom icon and action
-        <Link href="#" color="inverted" isUnderlined>
-          Action
-        </Link>
+        <ToastBarMessage>Dismissible message with custom icon and action</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
       </ToastBar>
     </>
   );
diff --git a/packages/web-react/src/components/Toast/demo/ToastDynamicToastQueue.tsx b/packages/web-react/src/components/Toast/demo/ToastDynamicToastQueue.tsx
index 877bb7611f..77f14fe4f2 100644
--- a/packages/web-react/src/components/Toast/demo/ToastDynamicToastQueue.tsx
+++ b/packages/web-react/src/components/Toast/demo/ToastDynamicToastQueue.tsx
@@ -2,17 +2,17 @@ import React, { ChangeEvent, useEffect, useState } from 'react';
 import { AlignmentXDictionaryType, AlignmentYDictionaryType, ToastColorType } from '../../../types';
 import { Button } from '../../Button';
 import { Checkbox } from '../../Checkbox';
-import { Link } from '../../Link';
 import { Radio } from '../../Radio';
 import { Select } from '../../Select';
 import { Stack } from '../../Stack';
 import { TextArea } from '../../TextArea';
 import { TextField } from '../../TextField';
+import { DEFAULT_TOAST_AUTO_CLOSE_INTERVAL } from '../constants';
 import Toast from '../Toast';
 import ToastBar from '../ToastBar';
 import { ToastItem, ToastProvider } from '../ToastContext';
-import { DEFAULT_TOAST_AUTO_CLOSE_INTERVAL } from '../constants';
 import { useToast } from '../useToast';
+import { ToastBarLink, ToastBarMessage } from '..';
 
 const ToastDynamicToastQueue = () => {
   const [isCollapsible, setIsCollapsible] = useState(true);
@@ -22,8 +22,10 @@ const ToastDynamicToastQueue = () => {
   const [hasIconValue, setHasIconValue] = useState(true);
   const [isDismissibleValue, setIsDismissibleValue] = useState(true);
   const [enableAutoCloseValue, setEnableAutoCloseValue] = useState(true);
+  const [isLinkFieldEnabled, setIsLinkFieldEnabled] = useState(true);
   const [autoCloseInterval, setAutoCloseInterval] = useState(DEFAULT_TOAST_AUTO_CLOSE_INTERVAL);
   const [messageValue, setMessageValue] = useState('This is a new toast message.');
+  const [linkValue, setLinkValue] = useState('This is a toast link.');
 
   const { queue, show, hide, clear, setQueue } = useToast();
 
@@ -31,36 +33,38 @@ const ToastDynamicToastQueue = () => {
     {
       id: '1',
       isOpen: true,
-      message: (
-        <>
-          I was first!{' '}
-          <Link href="#" color="inverted" isUnderlined>
-            Action
-          </Link>
-        </>
-      ),
+      content: {
+        message: 'I was first!',
+        link: 'Action',
+      },
       color: 'success',
       hasIcon: true,
       isDismissible: true,
       iconName: undefined,
       enableAutoClose: false,
+      linkProps: {
+        href: '#',
+        color: 'inverted',
+        isUnderlined: true,
+      },
     },
     {
       id: '2',
-      message: (
-        <>
-          I appeared later. This toast has a long message that wraps automatically.{' '}
-          <Link href="#" color="inverted" isUnderlined>
-            Action
-          </Link>
-        </>
-      ),
+      content: {
+        message: 'I appeared later. This toast has a long message that wraps automatically.',
+        link: 'Action',
+      },
       isOpen: true,
       color: 'informative',
       hasIcon: true,
       isDismissible: true,
       iconName: undefined,
       enableAutoClose: false,
+      linkProps: {
+        href: '#',
+        color: 'inverted',
+        isUnderlined: true,
+      },
     },
   ];
 
@@ -200,22 +204,47 @@ const ToastDynamicToastQueue = () => {
             />
             <TextArea
               label="Message"
-              name="content"
-              id="toast-content"
+              name="message"
+              id="toast-message"
               helperText="Can contain HTML."
               value={messageValue}
               onChange={(e) => setMessageValue(e.currentTarget.value)}
             />
+            <Checkbox
+              name="enable-link"
+              id="toast-enable-link"
+              label="Add link"
+              isChecked={isLinkFieldEnabled}
+              onChange={() => setIsLinkFieldEnabled(!isLinkFieldEnabled)}
+            />
+            <TextArea
+              label="Link"
+              name="link"
+              id="toast-link"
+              helperText="Can contain HTML."
+              value={linkValue}
+              isDisabled={!isLinkFieldEnabled}
+              onChange={(e) => setLinkValue(e.currentTarget.value)}
+            />
             <div>
               <Button
                 onClick={() => {
-                  show(messageValue, `my-dynamic-toast-${Date.now().toString()}`, {
-                    autoCloseInterval,
-                    color: colorValue,
-                    hasIcon: hasIconValue,
-                    isDismissible: isDismissibleValue,
-                    enableAutoClose: enableAutoCloseValue,
-                  });
+                  show(
+                    { message: messageValue, link: isLinkFieldEnabled ? linkValue : undefined },
+                    `my-dynamic-toast-${Date.now().toString()}`,
+                    {
+                      autoCloseInterval,
+                      color: colorValue,
+                      hasIcon: hasIconValue,
+                      isDismissible: isDismissibleValue,
+                      enableAutoClose: enableAutoCloseValue,
+                      linkProps: {
+                        href: '#',
+                        color: 'inverted',
+                        isUnderlined: true,
+                      },
+                    },
+                  );
                 }}
               >
                 Add
@@ -242,7 +271,7 @@ const ToastDynamicToastQueue = () => {
 
       <Toast alignmentX={alignmentX} alignmentY={alignmentY} isCollapsible={isCollapsible}>
         {queue.map((item) => {
-          const { color, iconName, id, isOpen, message, hasIcon, isDismissible } = item;
+          const { color, iconName, id, isOpen, content, hasIcon, isDismissible } = item;
 
           return (
             <ToastBar
@@ -253,9 +282,10 @@ const ToastDynamicToastQueue = () => {
               iconName={iconName}
               isDismissible={isDismissible}
               onClose={() => hide(id)}
-              isOpen={isOpen && !!message}
+              isOpen={isOpen && !!content}
             >
-              {message}
+              <ToastBarMessage>{content.message}</ToastBarMessage>
+              {content.link && <ToastBarLink href="#">{content.link}</ToastBarLink>}
             </ToastBar>
           );
         })}
diff --git a/packages/web-react/src/components/Toast/demo/ToastStaticToast.tsx b/packages/web-react/src/components/Toast/demo/ToastStaticToast.tsx
index 5ddb5841ba..cd8cabc88e 100644
--- a/packages/web-react/src/components/Toast/demo/ToastStaticToast.tsx
+++ b/packages/web-react/src/components/Toast/demo/ToastStaticToast.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Button } from '../../Button';
 import Toast from '../Toast';
 import ToastBar from '../ToastBar';
+import ToastBarMessage from '../ToastBarMessage';
 
 const ToastStaticToast = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -26,7 +27,7 @@ const ToastStaticToast = () => {
           hasIcon
           isDismissible
         >
-          I was hidden and you exposed me!
+          <ToastBarMessage>I was hidden and you exposed me!</ToastBarMessage>
         </ToastBar>
       </Toast>
     </>
diff --git a/packages/web-react/src/components/Toast/demo/UncontrolledToastDemo.tsx b/packages/web-react/src/components/Toast/demo/UncontrolledToastDemo.tsx
index 2578e4bc31..165c01bffe 100644
--- a/packages/web-react/src/components/Toast/demo/UncontrolledToastDemo.tsx
+++ b/packages/web-react/src/components/Toast/demo/UncontrolledToastDemo.tsx
@@ -1,18 +1,13 @@
 import React from 'react';
+import { Button } from '../../Button';
 import { ToastProvider } from '../ToastContext';
-import { useToast } from '../useToast';
 import UncontrolledToast from '../UncontrolledToast';
-import { Button } from '../../Button';
-import { Link } from '../../Link';
+import { useToast } from '../useToast';
 
-const ToastTextWithLink = (
-  <>
-    Hello, World! This is a toast message with an action.
-    <Link href="#" color="inverted" isUnderlined>
-      Action
-    </Link>
-  </>
-);
+const ToastTextWithLink = {
+  message: 'Hello, World! This is a toast message with an action.',
+  link: 'Action',
+};
 
 const ShowToastButton = () => {
   const { show, clear } = useToast();
@@ -23,7 +18,12 @@ const ShowToastButton = () => {
       <Button
         type="button"
         onClick={() => {
-          show(ToastTextWithLink, uniqueId, { color: 'warning', isDismissible: true, hasIcon: true });
+          show(ToastTextWithLink, uniqueId, {
+            color: 'warning',
+            isDismissible: true,
+            hasIcon: true,
+            linkProps: { href: '#' },
+          });
         }}
       >
         Show Toast
@@ -31,7 +31,7 @@ const ShowToastButton = () => {
       <Button
         type="button"
         onClick={() => {
-          show(ToastTextWithLink, uniqueId, { isDismissible: true, hasIcon: true });
+          show(ToastTextWithLink, uniqueId, { isDismissible: true, hasIcon: true, linkProps: { href: '#' } });
         }}
       >
         Show Toast
@@ -44,8 +44,9 @@ const ShowToastButton = () => {
             iconName: 'download',
             isDismissible: true,
             hasIcon: true,
-            enableAutoClose: true,
+            enableAutoClose: false,
             autoCloseInterval: 1500,
+            linkProps: { href: '#' },
           });
         }}
       >
diff --git a/packages/web-react/src/components/Toast/index.ts b/packages/web-react/src/components/Toast/index.ts
index e2350fa4bb..d5532559a7 100644
--- a/packages/web-react/src/components/Toast/index.ts
+++ b/packages/web-react/src/components/Toast/index.ts
@@ -1,8 +1,12 @@
 export { default as Toast } from './Toast';
 export { default as ToastBar } from './ToastBar';
+export { default as ToastBarMessage } from './ToastBarMessage';
+export { default as ToastBarLink } from './ToastBarLink';
 export { default as UncontrolledToast } from './UncontrolledToast';
 export * from './Toast';
 export * from './ToastBar';
+export * from './ToastBarMessage';
+export * from './ToastBarLink';
 export * from './UncontrolledToast';
 export * from './ToastContext';
 export * from './useToast';
diff --git a/packages/web-react/src/components/Toast/stories/Toast.stories.tsx b/packages/web-react/src/components/Toast/stories/Toast.stories.tsx
index ca1a8d637e..5c0fb60e13 100644
--- a/packages/web-react/src/components/Toast/stories/Toast.stories.tsx
+++ b/packages/web-react/src/components/Toast/stories/Toast.stories.tsx
@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SpiritToastProps } from '../../../types';
 import { Button } from '../../Button';
 import ReadMe from '../README.md';
-import { Toast, ToastBar } from '..';
+import { Toast, ToastBar, ToastBarMessage } from '..';
 
 const meta: Meta<typeof Toast> = {
   title: 'Components/Toast',
@@ -52,7 +52,7 @@ const ToastWithHooks = (args: SpiritToastProps) => {
       <Button onClick={() => setIsOpen(!isOpen)}>{buttonLabel}</Button>
       <Toast {...args}>
         <ToastBar id="my-toast" isOpen={isOpen} isDismissible onClose={() => setIsOpen(false)}>
-          This is a toast message
+          <ToastBarMessage>This is a toast message</ToastBarMessage>
         </ToastBar>
       </Toast>
     </>
diff --git a/packages/web-react/src/components/Toast/stories/ToastBar.stories.tsx b/packages/web-react/src/components/Toast/stories/ToastBar.stories.tsx
index da2037b218..ccf6a2100b 100644
--- a/packages/web-react/src/components/Toast/stories/ToastBar.stories.tsx
+++ b/packages/web-react/src/components/Toast/stories/ToastBar.stories.tsx
@@ -5,6 +5,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SpiritToastBarProps } from '../../../types';
 import ReadMe from '../README.md';
 import { Toast, ToastBar } from '..';
+import ToastBarMessage from '../ToastBarMessage';
+import ToastBarLink from '../ToastBarLink';
 
 const meta: Meta<typeof ToastBar> = {
   title: 'Components/Toast',
@@ -58,7 +60,12 @@ const meta: Meta<typeof ToastBar> = {
   },
   args: {
     id: 'toast-bar',
-    children: 'ToastBar Message',
+    children: (
+      <>
+        <ToastBarMessage>Hello, World! This is a toast message with an action.</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
+      </>
+    ),
     closeLabel: 'Close',
     color: 'inverted',
     hasIcon: false,
diff --git a/packages/web-react/src/components/Toast/stories/ToastBarLink.stories.tsx b/packages/web-react/src/components/Toast/stories/ToastBarLink.stories.tsx
new file mode 100644
index 0000000000..6d26d5d47c
--- /dev/null
+++ b/packages/web-react/src/components/Toast/stories/ToastBarLink.stories.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+import { LinkProps } from '../../../types';
+import ReadMe from '../README.md';
+import { Toast, ToastBar, ToastBarMessage, ToastBarLink } from '..';
+
+const meta: Meta<typeof ToastBarLink & { message: string }> = {
+  title: 'Components/Toast',
+  component: ToastBarLink,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    color: {
+      control: 'text',
+    },
+    href: {
+      control: 'text',
+    },
+    isUnderlined: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    children: 'This is a toast link',
+    href: '#',
+    color: 'inverted',
+    isUnderlined: true,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToastBarLink>;
+
+const ToastBarComponent = (args: LinkProps) => {
+  const { children, ...restProps } = args;
+
+  return (
+    <Toast alignmentY="top">
+      <ToastBar id="test">
+        <ToastBarMessage>This is a Toast message.</ToastBarMessage>
+        <ToastBarLink {...restProps}>{children}</ToastBarLink>
+      </ToastBar>
+    </Toast>
+  );
+};
+
+export const ToastBarPlaygroundLink: Story = {
+  name: 'ToastBarLink',
+  render: ToastBarComponent,
+};
diff --git a/packages/web-react/src/components/Toast/stories/ToastBarMessage.stories.tsx b/packages/web-react/src/components/Toast/stories/ToastBarMessage.stories.tsx
new file mode 100644
index 0000000000..47db535740
--- /dev/null
+++ b/packages/web-react/src/components/Toast/stories/ToastBarMessage.stories.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Markdown } from '@storybook/blocks';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ChildrenProps } from '../../../types';
+import ReadMe from '../README.md';
+import { ToastBarMessage } from '..';
+
+const meta: Meta<typeof ToastBarMessage> = {
+  title: 'Components/Toast',
+  component: ToastBarMessage,
+  parameters: {
+    docs: {
+      page: () => <Markdown>{ReadMe}</Markdown>,
+    },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+  },
+  args: {
+    children: 'This is a Toast message',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ToastBarMessage>;
+
+const ToastBarComponent = (args: ChildrenProps) => {
+  const { children, ...restProps } = args;
+
+  return <ToastBarMessage {...restProps}>{children}</ToastBarMessage>;
+};
+
+export const ToastBarPlaygroundMessage: Story = {
+  name: 'ToastBarMessage',
+  render: ToastBarComponent,
+};
diff --git a/packages/web-react/src/components/Toast/stories/UncontrolledToast.stories.tsx b/packages/web-react/src/components/Toast/stories/UncontrolledToast.stories.tsx
index d44b84298c..db74b7532a 100644
--- a/packages/web-react/src/components/Toast/stories/UncontrolledToast.stories.tsx
+++ b/packages/web-react/src/components/Toast/stories/UncontrolledToast.stories.tsx
@@ -1,10 +1,9 @@
 import { Markdown } from '@storybook/blocks';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-
 import { ToastItem, ToastProvider, UncontrolledToast } from '..';
 import { AlignmentX, EmotionColors } from '../../../constants';
-import { ToastColorType, UncontrolledToastProps } from '../../../types';
+import { LinkProps, ToastColorType, UncontrolledToastProps } from '../../../types';
 import { Button } from '../../Button';
 import ReadMe from '../README.md';
 import { DEFAULT_TOAST_AUTO_CLOSE_INTERVAL } from '../constants';
@@ -21,9 +20,6 @@ const meta: Meta<UncontrolledToastPlaygroundProps> = {
     },
   },
   argTypes: {
-    children: {
-      control: 'text',
-    },
     alignmentX: {
       control: 'select',
       options: [...Object.values(AlignmentX)],
@@ -86,7 +82,10 @@ const meta: Meta<UncontrolledToastPlaygroundProps> = {
     },
   },
   args: {
-    children: 'Hello, World!',
+    content: {
+      message: 'This is a toast message',
+      link: 'Action',
+    },
     alignmentX: 'center',
     alignmentY: 'bottom',
     closeLabel: 'Close',
@@ -97,6 +96,9 @@ const meta: Meta<UncontrolledToastPlaygroundProps> = {
     isCollapsible: true,
     enableAutoClose: true,
     autoCloseInterval: DEFAULT_TOAST_AUTO_CLOSE_INTERVAL,
+    linkProps: {
+      href: '#',
+    },
   },
 };
 
@@ -110,9 +112,10 @@ const ShowButton = (props: {
   hasIcon: boolean;
   iconName?: string;
   isDismissible: boolean;
-  text: string | JSX.Element;
+  linkProps: LinkProps;
+  content: { message: string | JSX.Element; link?: string | JSX.Element };
 }) => {
-  const { text, color, hasIcon, isDismissible, iconName, enableAutoClose, autoCloseInterval } = props;
+  const { content, color, hasIcon, isDismissible, iconName, enableAutoClose, autoCloseInterval, linkProps } = props;
   const { show, clear } = useToast();
 
   return (
@@ -120,13 +123,14 @@ const ShowButton = (props: {
       <Button
         type="button"
         onClick={() =>
-          show(text, Date.now().toString(), {
+          show({ message: content.message, link: content.link }, Date.now().toString(), {
             color,
             hasIcon,
             isDismissible,
             iconName,
             enableAutoClose,
             autoCloseInterval,
+            linkProps,
           })
         }
         marginBottom="space-400"
@@ -142,7 +146,7 @@ const ShowButton = (props: {
 };
 
 const UncontrolledToastComponent = (args: UncontrolledToastPlaygroundProps) => {
-  const { children, color, hasIcon, isDismissible, iconName, enableAutoClose, autoCloseInterval } = args;
+  const { content, color, hasIcon, isDismissible, iconName, enableAutoClose, autoCloseInterval, linkProps } = args;
 
   return (
     <ToastProvider>
@@ -153,7 +157,8 @@ const UncontrolledToastComponent = (args: UncontrolledToastPlaygroundProps) => {
         hasIcon={hasIcon}
         iconName={iconName}
         isDismissible={isDismissible}
-        text={children as string | JSX.Element}
+        content={content}
+        linkProps={linkProps}
       />
       <UncontrolledToast {...args} />
     </ToastProvider>
diff --git a/packages/web-react/src/components/Toast/useToastBarStyleProps.ts b/packages/web-react/src/components/Toast/useToastBarStyleProps.ts
index c5af80ff86..ef6abf8f96 100644
--- a/packages/web-react/src/components/Toast/useToastBarStyleProps.ts
+++ b/packages/web-react/src/components/Toast/useToastBarStyleProps.ts
@@ -1,14 +1,15 @@
 import classNames from 'classnames';
 import { useClassNamePrefix } from '../../hooks';
-import { SpiritToastBarProps } from '../../types';
+import { ToastBarProps } from '../../types';
 
-export const useToastBarStyleProps = (props: Omit<SpiritToastBarProps, 'onClose'>) => {
+export const useToastBarStyleProps = (props: ToastBarProps) => {
   const { color, isDismissible, ...restProps } = props;
 
   const toastBarClass = useClassNamePrefix('ToastBar');
   const toastBarBoxClass = `${toastBarClass}__box`;
+  const toastBarContainerClass = `${toastBarClass}__container`;
   const toastBarContentClass = `${toastBarClass}__content`;
-  const toastBarMessageClass = `${toastBarClass}__message`;
+  const toastBarLinkClass = `${toastBarClass}__link`;
   const colorClass = `${toastBarClass}--${color || 'inverted'}`;
   const dismissibleClass = `${toastBarClass}--dismissible`;
   const rootClass = classNames(toastBarClass, colorClass, isDismissible && dismissibleClass);
@@ -17,8 +18,9 @@ export const useToastBarStyleProps = (props: Omit<SpiritToastBarProps, 'onClose'
     classProps: {
       root: rootClass,
       box: toastBarBoxClass,
+      container: toastBarContainerClass,
       content: toastBarContentClass,
-      message: toastBarMessageClass,
+      link: toastBarLinkClass,
     },
     props: restProps,
   };
diff --git a/packages/web-react/src/types/toast.ts b/packages/web-react/src/types/toast.ts
index 45f6bb86b7..96c9f88414 100644
--- a/packages/web-react/src/types/toast.ts
+++ b/packages/web-react/src/types/toast.ts
@@ -17,7 +17,10 @@ export interface SpiritToastProps extends BaseToastProps {
 }
 
 export interface BaseToastBarProps extends ChildrenProps, StyleProps {
-  id: string;
+  closeLabel?: string;
+  color?: ToastColorType;
+  hasIcon?: boolean;
+  iconName?: string;
 }
 
 export interface ToastBarHandlingProps {
@@ -33,10 +36,7 @@ export interface TransitionToastBarProps {
 }
 
 export interface SpiritToastBarProps extends ToastBarProps, TransitionToastBarProps {
-  closeLabel?: string;
-  color?: ToastColorType;
-  hasIcon?: boolean;
-  iconName?: string;
+  id: string;
 }
 
 export interface ToastCloseButtonProps extends ToastBarHandlingProps, SpiritToastBarProps {
diff --git a/packages/web-twig/src/Resources/components/Toast/README.md b/packages/web-twig/src/Resources/components/Toast/README.md
index 75cf041ba4..95192add40 100644
--- a/packages/web-twig/src/Resources/components/Toast/README.md
+++ b/packages/web-twig/src/Resources/components/Toast/README.md
@@ -8,6 +8,8 @@ Toast is a composition of a few subcomponents:
 
 - [Toast](#toast)
   - [ToastBar](#toastbar)
+    - [ToastBarMessage](#toastbarmessage)
+    - [ToastBarLink](#toastbarlink)
 
 ## Toast
 
@@ -150,7 +152,7 @@ Minimum example:
 
 ```twig
 <ToastBar>
-  Message only
+  <ToastBarMessage>Message only</ToastBarMessage>
 </ToastBar>
 ```
 
@@ -160,7 +162,7 @@ An icon can be displayed in the ToastBar component, depending on the color of th
 
 ```twig
 <ToastBar color="success" hasIcon>
-  Message with icon
+  <ToastBarMessage>Message with icon</ToastBarMessage>
 </ToastBar>
 ```
 
@@ -168,7 +170,7 @@ Alternatively, a custom icon can be used:
 
 ```twig
 <ToastBar iconName="download">
-  Message with custom icon
+  <ToastBarMessage>Message with custom icon</ToastBarMessage>
 </ToastBar>
 ```
 
@@ -182,19 +184,54 @@ Alternatively, a custom icon can be used:
 | `success`     | `check-plain` |
 | `warning`     | `warning`     |
 
-### Action Link
+### ToastBar Components
 
-An action link can be added to the ToastBar component:
+The content of `ToastBar` can be assembled from the following subcomponents:
+
+#### ToastBarMessage
+
+`ToastBarMessage` is a subcomponent designated for the main message in `ToastBar`.
+
+```twig
+<ToastBar>
+  <ToastBarMessage>Message</ToastBarMessage>
+</ToastBar>
+```
+
+#### API
+
+| Name       | Type     | Default | Required | Description            |
+| ---------- | -------- | ------- | -------- | ---------------------- |
+| `children` | `string` | —       | ✓        | Content of the message |
+
+On top of the API options, the components accept [additional attributes][readme-additional-attributes].
+If you need more control over the styling of a component, you can use [style props][readme-style-props]
+and [escape hatches][readme-escape-hatches].
+
+#### ToastBarLink
+
+`ToastBarLink` is a subcomponent designated to create an action link within `ToastBar`.
 
 ```twig
 <ToastBar>
-  Message with action
-  <Link href="#" color="inverted" isUnderlined>Action</Link>
+  <ToastBarMessage>Message with action</ToastBarMessage>
+  <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 ```
 
-👉 For the sake of flexibility, developers can pass the link as part of the message. However, it is strongly recommended
-to use the **inverted underlined** variant of the link (for all ToastBar colors) to make it stand out from the message.
+#### API
+
+| Name           | Type                                             | Default    | Required | Description                    |
+| -------------- | ------------------------------------------------ | ---------- | -------- | ------------------------------ |
+| `children`     | `string`                                         | —          | ✓        | Content of the link            |
+| `color`        | [Action Link Color dictionary][dictionary-color] | `inverted` | ✕        | Color of the link              |
+| `href`         | `string`                                         | —          | ✕        | ToastBarLink's href attribute  |
+| `isDisabled`   | `bool`                                           | `false`    | ✕        | Whether is the link disabled   |
+| `isUnderlined` | `bool`                                           | `true`     | ✕        | Whether is the link underlined |
+
+On top of the API options, the components accept [additional attributes][readme-additional-attributes].
+If you need more control over the styling of a component, you can use [style props][readme-style-props]
+and [escape hatches][readme-escape-hatches].
 
 👉 **Do not put any important actions** like "Undo" in the ToastBar component (unless there are other means to perform
 said action), as it is very hard (if not impossible) to reach for users with assistive technologies. Read more about
@@ -209,7 +246,7 @@ For example:
 
 ```twig
 <ToastBar color="success">
-  Success message
+  <ToastBarMessage>Success message</ToastBarMessage>
 </ToastBar>
 ```
 
@@ -240,7 +277,7 @@ To make the ToastBar dismissible, add the `isDismissible` prop along with a uniq
 
 ```twig
 <ToastBar id="my-dismissible-toast" isDismissible>
-  Dismissible message
+  <ToastBarMessage>Dismissible message</ToastBarMessage>
 </ToastBar>
 ```
 
@@ -270,8 +307,8 @@ and [escape hatches][readme-escape-hatches].
 ```twig
 <Toast>
   <ToastBar id="my-dismissible-toast" isDismissible>
-    Toast message
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Toast message</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
   </ToastBar>
 </Toast>
 ```
@@ -326,12 +363,21 @@ Then configure and create a new Toast instance and call the `show` method on it,
 import Toast from '@lmc-eu/spirit-web/dist/js/Toast';
 
 const toast = new Toast(null, {
-  autoCloseInterval: 3000 // Set interval after ToastBar will be closed in ms, default: 3000
+  autoCloseInterval: 3000, // Set interval after ToastBar will be closed in ms, default: 3000
   color: 'informative', // One of ['inverted' (default), 'success', 'warning, 'danger', 'informative']
   containerId: 'toast-example', // Must match the ID of the Toast container in HTML
-  content: 'Hello, this is my toast message!', // Can be plain text or HTML
   enableAutoClose: true, // If true, ToastBar will close after `autoCloseInterval`, default: true
   hasIcon: true,
+  message: 'Hello, this is my toast message!', // Can be plain text or HTML
+  linkContent: 'Action', // Link text
+  linkProps: {
+    href: 'https://example.com', // Link URL
+    target: '_blank', // Optional link target attribute
+    isUnderlined: false, // Optional link underlining, default: true
+    isDisabled: false, // Optional link disabling, default: false
+    elementType: 'a', // Optional link element type, default: 'a'
+    color: 'inverted', // Optional link color variant, default: 'inverted'
+  },
   iconName: 'info', // Optional icon name used as the #fragment in the SVG sprite URL
   id: 'my-toast', // An ID is required for dismissible ToastBar
   isDismissible: true,
diff --git a/packages/web-twig/src/Resources/components/Toast/ToastBar.twig b/packages/web-twig/src/Resources/components/Toast/ToastBar.twig
index d865fad5ae..b4cf556deb 100644
--- a/packages/web-twig/src/Resources/components/Toast/ToastBar.twig
+++ b/packages/web-twig/src/Resources/components/Toast/ToastBar.twig
@@ -14,8 +14,8 @@
 {%- set _rootColorClassName = _spiritClassPrefix ~ 'ToastBar--' ~ _color -%}
 {%- set _rootDismissibleClassName = _isDismissible is same as(true) and _isTemplate is same as(false) ? _spiritClassPrefix ~ 'ToastBar--dismissible' : null -%}
 {%- set _boxClassName = _spiritClassPrefix ~ 'ToastBar__box' -%}
+{%- set _containerClassName = _spiritClassPrefix ~ 'ToastBar__container' -%}
 {%- set _contentClassName = _spiritClassPrefix ~ 'ToastBar__content' -%}
-{%- set _messageClassName = _spiritClassPrefix ~ 'ToastBar__message' -%}
 {%- set _isOpenClassName = _isOpen or _isTemplate ? 'is-open' : 'is-hidden' -%}
 
 {# Attributes #}
@@ -43,7 +43,7 @@
     data-spirit-populate-field="item"
 >
     <div class="{{ _boxClassName }}">
-        <div class="{{ _contentClassName }}">
+        <div class="{{ _containerClassName }}">
             {% if _hasIcon or _iconName %}
                 {% if _isTemplate %}
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" data-spirit-populate-field="icon">
@@ -53,7 +53,7 @@
                    <Icon boxSize="20" name="{{ _iconNameValue }}" isReusable={ false } />
                 {% endif %}
             {% endif %}
-            <div class="{{ _messageClassName }}" data-spirit-populate-field="message">
+            <div class="{{ _contentClassName }}">
                 {% block content %}{% endblock %}
             </div>
         </div>
diff --git a/packages/web-twig/src/Resources/components/Toast/ToastBarLink.twig b/packages/web-twig/src/Resources/components/Toast/ToastBarLink.twig
new file mode 100644
index 0000000000..dfe99c0ba0
--- /dev/null
+++ b/packages/web-twig/src/Resources/components/Toast/ToastBarLink.twig
@@ -0,0 +1,24 @@
+{# API #}
+{%- set props = props | default([]) -%}
+{%- set _color = props.color | default('inverted') -%}
+{%- set _isUnderlined = props.isUnderlined ?? true -%}
+{%- set _children = block('content') -%}
+
+{# Class names #}
+{%- set _rootClassName = _spiritClassPrefix ~ 'ToastBar__link' -%}
+
+{# Miscellaneous #}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _allowedAttributes = [ 'target', 'title' ] -%}
+{%- set _classNames = [ _rootClassName, _styleProps.className  ] -%}
+
+{% embed "@spirit/link.twig" with { props: props | merge({
+    color: _color,
+    isUnderlined: _isUnderlined,
+    'data-spirit-populate-field': 'link',
+    UNSAFE_className: _classNames | join(' '),
+    UNSAFE_style: _styleProps.style,
+}) } %}
+    {% block content %}{{ _children }}{% endblock %}
+{% endembed %}
+
diff --git a/packages/web-twig/src/Resources/components/Toast/ToastBarMessage.twig b/packages/web-twig/src/Resources/components/Toast/ToastBarMessage.twig
new file mode 100644
index 0000000000..268cecfe10
--- /dev/null
+++ b/packages/web-twig/src/Resources/components/Toast/ToastBarMessage.twig
@@ -0,0 +1,17 @@
+{# API #}
+{%- set props = props | default([]) -%}
+
+{# Miscellaneous #}
+{%- set _styleProps = useStyleProps(props) -%}
+{%- set _textTruncateClassName = _spiritClassPrefix ~ 'text-truncate-multiline' -%}
+{%- set _classNames = [ _styleProps.className, _textTruncateClassName  ] -%}
+
+
+<div
+    {{ mainProps(props) }}
+    {{ styleProp(_styleProps) }}
+    {{ classProp(_classNames) }}
+    data-spirit-populate-field="message"
+>
+    {% block content %}{% endblock %}
+</div>
diff --git a/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBar.twig b/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBar.twig
index 53b6be974b..0e2fb1b207 100644
--- a/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBar.twig
+++ b/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBar.twig
@@ -1,18 +1,20 @@
-<ToastBar>Message only</ToastBar>
+<ToastBar>
+    <ToastBarMessage>Message only</ToastBarMessage>
+</ToastBar>
 
 <!-- Render with default icon -->
 <ToastBar hasIcon>
-    Message with icon
+    <ToastBarMessage>Message with icon</ToastBarMessage>
 </ToastBar>
 
 <!-- Render with custom icon using `iconName` alone -->
 <ToastBar iconName="download">
-    Message with custom icon
+    <ToastBarMessage>Message with custom icon</ToastBarMessage>
 </ToastBar>
 
 <!-- Render in success color with matching icon and close button -->
 <ToastBar color="success" id="toast-dismiss" isDismissible>
-    Dismissible message with success color
+    <ToastBarMessage>Dismissible message with success color</ToastBarMessage>
 </ToastBar>
 
 <!-- Render as template -->
@@ -33,8 +35,8 @@
     UNSAFE_className="custom-class"
     UNSAFE_style="outline: 5px solid blue; outline-offset: -5px;"
 >
-    Dismissible message with custom icon and action
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Dismissible message with custom icon and action</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <!-- Render as template with all props -->
@@ -50,6 +52,6 @@
     UNSAFE_className="custom-class"
     UNSAFE_style="outline: 5px solid blue; outline-offset: -5px;"
 >
-    Dismissible message with custom icon and action
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Dismissible message with custom icon and action</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
diff --git a/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBarLink.twig b/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBarLink.twig
new file mode 100644
index 0000000000..eec9457457
--- /dev/null
+++ b/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBarLink.twig
@@ -0,0 +1,14 @@
+<ToastBarLink>ToastBar Link</ToastBarLink>
+
+<!-- Render with all props -->
+<ToastBarLink
+    color="primary"
+    href="https://www.google.com"
+    target="_blank"
+    isUnderlined={false}
+    isDisabled={false}
+    UNSAFE_className="custom-class"
+    UNSAFE_style="outline: 5px solid blue; outline-offset: -5px;"
+>
+    ToastBar Link
+</ToastBarLink>
diff --git a/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBarMessage.twig b/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBarMessage.twig
new file mode 100644
index 0000000000..bda0625391
--- /dev/null
+++ b/packages/web-twig/src/Resources/components/Toast/__tests__/__fixtures__/toastBarMessage.twig
@@ -0,0 +1,9 @@
+<ToastBarMessage>ToastBar Message</ToastBarMessage>
+
+<!-- Render with all props -->
+<ToastBarMessage
+    UNSAFE_className="custom-class"
+    UNSAFE_style="outline: 5px solid blue; outline-offset: -5px;"
+>
+    ToastBar Message
+</ToastBarMessage>
diff --git a/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBar.twig.snap.html b/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBar.twig.snap.html
index c0dcddfc02..553ef065b5 100644
--- a/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBar.twig.snap.html
+++ b/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBar.twig.snap.html
@@ -7,9 +7,11 @@
   <body>
     <div class="ToastBar ToastBar--inverted is-open" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
-          <div class="ToastBar__message" data-spirit-populate-field="message">
-            Message only
+        <div class="ToastBar__container">
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline" data-spirit-populate-field="message">
+              Message only
+            </div>
           </div>
         </div>
       </div>
@@ -18,12 +20,14 @@
 
     <div class="ToastBar ToastBar--inverted is-open" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true">
           <path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM13 17H11V11H13V17ZM13 9H11V7H13V9Z" fill="currentColor">
           </path></svg>
-          <div class="ToastBar__message" data-spirit-populate-field="message">
-            Message with icon
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline" data-spirit-populate-field="message">
+              Message with icon
+            </div>
           </div>
         </div>
       </div>
@@ -32,12 +36,14 @@
 
     <div class="ToastBar ToastBar--inverted is-open" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true">
           <path d="M12 16.575C11.8667 16.575 11.7417 16.5542 11.625 16.5125C11.5083 16.4708 11.4 16.4 11.3 16.3L6.7 11.7C6.51667 11.5167 6.425 11.2833 6.425 11C6.425 10.7167 6.51667 10.4833 6.7 10.3C6.88333 10.1167 7.12083 10.0208 7.4125 10.0125C7.70417 10.0042 7.94167 10.0917 8.125 10.275L11 13.15V4C11 3.71667 11.0958 3.47917 11.2875 3.2875C11.4792 3.09583 11.7167 3 12 3C12.2833 3 12.5208 3.09583 12.7125 3.2875C12.9042 3.47917 13 3.71667 13 4V13.15L15.875 10.275C16.0583 10.0917 16.2958 10.0042 16.5875 10.0125C16.8792 10.0208 17.1167 10.1167 17.3 10.3C17.4833 10.4833 17.575 10.7167 17.575 11C17.575 11.2833 17.4833 11.5167 17.3 11.7L12.7 16.3C12.6 16.4 12.4917 16.4708 12.375 16.5125C12.2583 16.5542 12.1333 16.575 12 16.575ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V17C3 16.7167 3.09583 16.4792 3.2875 16.2875C3.47917 16.0958 3.71667 16 4 16C4.28333 16 4.52083 16.0958 4.7125 16.2875C4.90417 16.4792 5 16.7167 5 17V19H19V17C19 16.7167 19.0958 16.4792 19.2875 16.2875C19.4792 16.0958 19.7167 16 20 16C20.2833 16 20.5208 16.0958 20.7125 16.2875C20.9042 16.4792 21 16.7167 21 17V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5Z" fill="currentColor">
           </path></svg>
-          <div class="ToastBar__message" data-spirit-populate-field="message">
-            Message with custom icon
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline" data-spirit-populate-field="message">
+              Message with custom icon
+            </div>
           </div>
         </div>
       </div>
@@ -46,9 +52,11 @@
 
     <div class="ToastBar ToastBar--success ToastBar--dismissible is-open" id="toast-dismiss" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
-          <div class="ToastBar__message" data-spirit-populate-field="message">
-            Dismissible message with success color
+        <div class="ToastBar__container">
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline" data-spirit-populate-field="message">
+              Dismissible message with success color
+            </div>
           </div>
         </div>
         <button data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#toast-dismiss" aria-controls="toast-dismiss" aria-expanded="true" class="Button Button--success Button--small Button--square" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
@@ -60,8 +68,8 @@
 
     <div class="ToastBar ToastBar--inverted is-open" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
-          <div class="ToastBar__message" data-spirit-populate-field="message">
+        <div class="ToastBar__container">
+          <div class="ToastBar__content">
           </div>
         </div>
       </div>
@@ -70,11 +78,11 @@
 
     <div class="ToastBar ToastBar--inverted is-open" id="template-toast" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true" data-spirit-populate-field="icon">
           <use xlink:href="#">
           </use></svg>
-          <div class="ToastBar__message" data-spirit-populate-field="message">
+          <div class="ToastBar__content">
           </div>
         </div>
         <button data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#template-toast" aria-controls="template-toast" aria-expanded="true" class="Button Button--inverted Button--small Button--square" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
@@ -86,12 +94,15 @@
 
     <div style="outline: 5px solid blue; outline-offset: -5px;" class="ToastBar ToastBar--success ToastBar--dismissible is-hidden custom-class" id="my-toast" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true">
           <path d="M12 16.575C11.8667 16.575 11.7417 16.5542 11.625 16.5125C11.5083 16.4708 11.4 16.4 11.3 16.3L6.7 11.7C6.51667 11.5167 6.425 11.2833 6.425 11C6.425 10.7167 6.51667 10.4833 6.7 10.3C6.88333 10.1167 7.12083 10.0208 7.4125 10.0125C7.70417 10.0042 7.94167 10.0917 8.125 10.275L11 13.15V4C11 3.71667 11.0958 3.47917 11.2875 3.2875C11.4792 3.09583 11.7167 3 12 3C12.2833 3 12.5208 3.09583 12.7125 3.2875C12.9042 3.47917 13 3.71667 13 4V13.15L15.875 10.275C16.0583 10.0917 16.2958 10.0042 16.5875 10.0125C16.8792 10.0208 17.1167 10.1167 17.3 10.3C17.4833 10.4833 17.575 10.7167 17.575 11C17.575 11.2833 17.4833 11.5167 17.3 11.7L12.7 16.3C12.6 16.4 12.4917 16.4708 12.375 16.5125C12.2583 16.5542 12.1333 16.575 12 16.575ZM5 21C4.45 21 3.97917 20.8042 3.5875 20.4125C3.19583 20.0208 3 19.55 3 19V17C3 16.7167 3.09583 16.4792 3.2875 16.2875C3.47917 16.0958 3.71667 16 4 16C4.28333 16 4.52083 16.0958 4.7125 16.2875C4.90417 16.4792 5 16.7167 5 17V19H19V17C19 16.7167 19.0958 16.4792 19.2875 16.2875C19.4792 16.0958 19.7167 16 20 16C20.2833 16 20.5208 16.0958 20.7125 16.2875C20.9042 16.4792 21 16.7167 21 17V19C21 19.55 20.8042 20.0208 20.4125 20.4125C20.0208 20.8042 19.55 21 19 21H5Z" fill="currentColor">
           </path></svg>
-          <div class="ToastBar__message" data-spirit-populate-field="message">
-            Dismissible message with custom icon and action <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline" data-spirit-populate-field="message">
+              Dismissible message with custom icon and action
+            </div>
+            <a data-spirit-populate-field="link" href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#my-toast" aria-controls="my-toast" aria-expanded="true" class="Button Button--success Button--small Button--square" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
@@ -103,12 +114,15 @@
 
     <div style="outline: 5px solid blue; outline-offset: -5px;" class="ToastBar ToastBar--success is-open custom-class" id="my-toast-template" data-spirit-populate-field="item">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewbox="0 0 24 24" fill="none" aria-hidden="true" data-spirit-populate-field="icon">
           <use xlink:href="#">
           </use></svg>
-          <div class="ToastBar__message" data-spirit-populate-field="message">
-            Dismissible message with custom icon and action <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline" data-spirit-populate-field="message">
+              Dismissible message with custom icon and action
+            </div>
+            <a data-spirit-populate-field="link" href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button data-spirit-dismiss="toast" data-spirit-populate-field="close-button" data-spirit-target="#my-toast-template" aria-controls="my-toast-template" aria-expanded="true" class="Button Button--success Button--small Button--square" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" aria-hidden="true">
diff --git a/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBarLink.twig.snap.html b/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBarLink.twig.snap.html
new file mode 100644
index 0000000000..289c33f9bc
--- /dev/null
+++ b/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBarLink.twig.snap.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <a data-spirit-populate-field="link" href="" class="link-inverted link-underlined ToastBar__link">ToastBar Link</a>
+    <!-- Render with all props -->
+     <a target="_blank" data-spirit-populate-field="link" href="https://www.google.com" style="outline: 5px solid blue; outline-offset: -5px;" class="link-primary ToastBar__link custom-class">ToastBar Link</a>
+  </body>
+</html>
diff --git a/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBarMessage.twig.snap.html b/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBarMessage.twig.snap.html
new file mode 100644
index 0000000000..4e40366af8
--- /dev/null
+++ b/packages/web-twig/src/Resources/components/Toast/__tests__/__snapshots__/toastBarMessage.twig.snap.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <title>
+    </title>
+  </head>
+  <body>
+    <div class="text-truncate-multiline" data-spirit-populate-field="message">
+      ToastBar Message
+    </div>
+    <!-- Render with all props -->
+
+    <div style="outline: 5px solid blue; outline-offset: -5px;" class="custom-class text-truncate-multiline" data-spirit-populate-field="message">
+      ToastBar Message
+    </div>
+  </body>
+</html>
diff --git a/packages/web-twig/src/Resources/components/Toast/stories/ToastColors.twig b/packages/web-twig/src/Resources/components/Toast/stories/ToastColors.twig
index 1c3ca4dc82..a4d54531b0 100644
--- a/packages/web-twig/src/Resources/components/Toast/stories/ToastColors.twig
+++ b/packages/web-twig/src/Resources/components/Toast/stories/ToastColors.twig
@@ -1,24 +1,24 @@
 <ToastBar id="my-toast-color-inverted" hasIcon isDismissible>
-    Inverted
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Inverted</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar color="informative" id="my-toast-color-informative" hasIcon isDismissible>
-    Informative
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage> Informative</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar color="success" id="my-toast-color-success" hasIcon isDismissible>
-    Success
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Success</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar color="warning" id="my-toast-color-warning" hasIcon isDismissible>
-    Warning
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Warning</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar color="danger" id="my-toast-color-danger" hasIcon isDismissible>
-    Danger
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Danger</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
diff --git a/packages/web-twig/src/Resources/components/Toast/stories/ToastContentVariations.twig b/packages/web-twig/src/Resources/components/Toast/stories/ToastContentVariations.twig
index 741b581c07..873a129d49 100644
--- a/packages/web-twig/src/Resources/components/Toast/stories/ToastContentVariations.twig
+++ b/packages/web-twig/src/Resources/components/Toast/stories/ToastContentVariations.twig
@@ -1,25 +1,27 @@
-<ToastBar>Message only</ToastBar>
+<ToastBar>
+    <ToastBarMessage>Message only</ToastBarMessage>
+</ToastBar>
 
 <ToastBar>
-    Message with action
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Message with action</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar>
-    When the text is long and reaches the maximum width limit, the action automatically wraps to the next line.
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>When the text is long and reaches the maximum width limit, the action automatically wraps to the next line.</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar hasIcon>
-    Message with icon and action
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Message with icon and action</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
 
 <ToastBar id="my-toast-variation-dismissible" isDismissible>
-    Dismissible message
+    <ToastBarMessage>Dismissible message</ToastBarMessage>
 </ToastBar>
 
 <ToastBar id="my-toast-variation-dismissible-with-icon-and-action" iconName="download" isDismissible>
-    Dismissible message with custom icon and action
-    <Link href="#" color="inverted" isUnderlined>Action</Link>
+    <ToastBarMessage>Dismissible message with custom icon and action</ToastBarMessage>
+    <ToastBarLink href="#">Action</ToastBarLink>
 </ToastBar>
diff --git a/packages/web-twig/src/Resources/components/Toast/stories/ToastDynamicToastQueue.twig b/packages/web-twig/src/Resources/components/Toast/stories/ToastDynamicToastQueue.twig
index 1840b265a7..e71d47c627 100644
--- a/packages/web-twig/src/Resources/components/Toast/stories/ToastDynamicToastQueue.twig
+++ b/packages/web-twig/src/Resources/components/Toast/stories/ToastDynamicToastQueue.twig
@@ -33,6 +33,17 @@
 
     // Initialize the field state.
     autoCloseIntervalField.disabled = !enableAutoCloseCheckbox.checked;
+
+    // Disable link field if add link is not checked.
+    const linkField = document.getElementById('toast-link');
+    const enableLinkCheckbox = document.getElementById('toast-enable-link');
+
+    enableLinkCheckbox.addEventListener('change', (event) => {
+        linkField.disabled = !event.target.checked;
+    });
+
+    // Initialize the field state.
+    linkField.disabled = !enableLinkCheckbox.checked;
 </script>
 
 <form>
@@ -87,11 +98,20 @@
             <TextArea
                 autocomplete="off"
                 label="Message"
-                name="content"
-                id="toast-content"
+                name="message"
+                id="toast-message"
                 helperText="Can contain HTML."
                 value="This is a new toast message."
             />
+            <Checkbox name="enable-link" autocomplete="off" id="toast-enable-link" isChecked label="Add link" />
+            <TextArea
+                autocomplete="off"
+                label="Link"
+                name="link"
+                id="toast-link"
+                helperText="Can contain HTML."
+                value="This is a toast link."
+            />
             <div>
                 <Button onclick="addDynamicToast(event, 'toast-example');">
                     Add
@@ -136,17 +156,20 @@
 <Toast id="toast-example">
 
     <template data-spirit-snippet="item">
-        <ToastBar isTemplate color="success" hasIcon isDismissible />
+        <ToastBar isTemplate color="success" hasIcon isDismissible>
+            <ToastBarMessage></ToastBarMessage>
+            <ToastBarLink href="#"></ToastBarLink>
+        </ToastBar>
     </template>
 
     <ToastBar color="success" id="my-dismissible-toast" hasIcon isDismissible>
-        I was first!
-        <a href="#" class="link-inverted link-underlined">Action</a>
+        <ToastBarMessage>I was first!</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
     </ToastBar>
 
     <ToastBar color="informative" id="my-other-dismissible-toast" hasIcon isDismissible>
-        I appeared later. This toast has a long message that wraps automatically.
-        <Link href="#" color="inverted" isUnderlined>Action</Link>
+        <ToastBarMessage>I appeared later. This toast has a long message that wraps automatically.</ToastBarMessage>
+        <ToastBarLink href="#">Action</ToastBarLink>
     </ToastBar>
 
 </Toast>
diff --git a/packages/web-twig/src/Resources/components/Toast/stories/ToastStaticToast.twig b/packages/web-twig/src/Resources/components/Toast/stories/ToastStaticToast.twig
index 151fa7c88f..ce2978531d 100644
--- a/packages/web-twig/src/Resources/components/Toast/stories/ToastStaticToast.twig
+++ b/packages/web-twig/src/Resources/components/Toast/stories/ToastStaticToast.twig
@@ -19,6 +19,6 @@
         isDismissible
         isOpen={ false }
     >
-        I was hidden and you exposed me!
+        <ToastBarMessage>I was hidden and you exposed me!</ToastBarMessage>
     </ToastBar>
 </Toast>
diff --git a/packages/web-twig/src/Resources/twig-components/toastBarLink.twig b/packages/web-twig/src/Resources/twig-components/toastBarLink.twig
new file mode 100644
index 0000000000..bdad9e93f2
--- /dev/null
+++ b/packages/web-twig/src/Resources/twig-components/toastBarLink.twig
@@ -0,0 +1 @@
+{% extends '@spirit/Toast/ToastBarLink.twig' %}
diff --git a/packages/web-twig/src/Resources/twig-components/toastBarMessage.twig b/packages/web-twig/src/Resources/twig-components/toastBarMessage.twig
new file mode 100644
index 0000000000..130cb00d48
--- /dev/null
+++ b/packages/web-twig/src/Resources/twig-components/toastBarMessage.twig
@@ -0,0 +1 @@
+{% extends '@spirit/Toast/ToastBarMessage.twig' %}
diff --git a/packages/web/src/js/Toast.ts b/packages/web/src/js/Toast.ts
index 0527fcabfe..1f5c4271d5 100644
--- a/packages/web/src/js/Toast.ts
+++ b/packages/web/src/js/Toast.ts
@@ -7,6 +7,8 @@ import {
   ATTRIBUTE_DATA_POPULATE_FIELD,
   ATTRIBUTE_DATA_SNIPPET,
   ATTRIBUTE_DATA_TARGET,
+  CLASS_NAME_LINK_DISABLED,
+  CLASS_NAME_LINK_UNDERLINED,
   CLASS_NAME_HIDDEN,
   CLASS_NAME_TRANSITIONING,
   CLASS_NAME_VISIBLE,
@@ -40,6 +42,7 @@ const SELECTOR_ICON_ELEMENT = `[${ATTRIBUTE_DATA_POPULATE_FIELD}="icon"]`;
 const SELECTOR_CLOSE_BUTTON_ELEMENT = `[${ATTRIBUTE_DATA_POPULATE_FIELD}="close-button"]`;
 const SELECTOR_DISMISS_TRIGGER_ELEMENT = `[${ATTRIBUTE_DATA_DISMISS}="${NAME}"]`;
 const SELECTOR_MESSAGE_ELEMENT = `[${ATTRIBUTE_DATA_POPULATE_FIELD}="message"]`;
+const SELECTOR_LINK_ELEMENT = `[${ATTRIBUTE_DATA_POPULATE_FIELD}="link"]`;
 
 // Keep in sync with transitions in `scss/Toast/_theme.scss`.
 export const PROPERTY_NAME_SLOWEST_TRANSITION = {
@@ -54,8 +57,18 @@ type Config = {
   autoCloseInterval: number;
   color: Color;
   containerId: string;
-  content: HTMLElement | string;
   enableAutoClose: boolean;
+  message: HTMLElement | string;
+  enableLink: boolean;
+  linkContent: HTMLElement | string;
+  linkProps: {
+    color: 'primary' | 'secondary' | 'inverted';
+    elementType: string;
+    href: string;
+    isDisabled: boolean;
+    isUnderlined: boolean;
+    target: '_blank' | '_self' | '_parent' | '_top';
+  };
   hasIcon: boolean;
   iconName: string;
   id: string;
@@ -173,6 +186,35 @@ class Toast extends BaseComponent {
     }
   }
 
+  updateOrRemoveLink(linkElement: HTMLElement) {
+    const { linkContent, linkProps } = this.config as Config;
+
+    if (!linkProps.href) {
+      warning(false, 'Property href in Toast link is required, nothing given.');
+    }
+
+    if (linkContent) {
+      const linkElementWithType = document.createElement(linkProps.elementType || 'a');
+      linkElement.replaceWith(linkElementWithType);
+      const color = linkProps.color || 'inverted';
+      const isUnderlined = linkProps.isUnderlined !== undefined ? linkProps.isUnderlined : true;
+
+      if (isUnderlined) {
+        linkElementWithType.classList.add(CLASS_NAME_LINK_UNDERLINED);
+      }
+      if (linkProps.isDisabled) {
+        linkElementWithType.classList.add(CLASS_NAME_LINK_DISABLED);
+      }
+      linkElementWithType.classList.add('ToastBar__link');
+      linkElementWithType.classList.add(`link-${color}`);
+      linkElementWithType.setAttribute('href', linkProps.href);
+      linkProps.target && linkElementWithType.setAttribute('target', linkProps.target);
+      linkElementWithType!.innerHTML = typeof linkContent === 'string' ? linkContent : linkContent.outerHTML;
+    } else {
+      linkElement!.remove();
+    }
+  }
+
   createFromTemplate(): SpiritElement {
     const template = this.getTemplate();
     if (!template) {
@@ -180,8 +222,8 @@ class Toast extends BaseComponent {
     }
 
     const config = this.config as Config;
-    if (!config.content) {
-      warning(false, 'Toast content is required, nothing given.');
+    if (!config.message) {
+      warning(false, 'Toast message is required, nothing given.');
 
       return null;
     }
@@ -190,14 +232,16 @@ class Toast extends BaseComponent {
     const iconElement = template.querySelector(SELECTOR_ICON_ELEMENT) as HTMLElement;
     const closeButtonElement = template.querySelector(SELECTOR_CLOSE_BUTTON_ELEMENT) as HTMLElement;
     const messageElement = template.querySelector(SELECTOR_MESSAGE_ELEMENT) as HTMLElement;
+    const linkElement = template.querySelector(SELECTOR_LINK_ELEMENT) as HTMLElement;
 
     itemElement!.setAttribute('id', config.id);
     itemElement!.setAttribute('data-spirit-color', config.color);
 
     this.updateOrRemoveIcon(iconElement);
     this.updateOrRemoveCloseButton(closeButtonElement);
+    this.updateOrRemoveLink(linkElement);
 
-    messageElement!.innerHTML = typeof config.content === 'string' ? config.content : config.content.outerHTML;
+    messageElement!.innerHTML = typeof config.message === 'string' ? config.message : config.message.outerHTML;
 
     return itemElement;
   }
diff --git a/packages/web/src/js/constants.ts b/packages/web/src/js/constants.ts
index 68746e9cca..048f741051 100644
--- a/packages/web/src/js/constants.ts
+++ b/packages/web/src/js/constants.ts
@@ -12,5 +12,7 @@ export const CLASS_NAME_HIDDEN = 'is-hidden';
 export const CLASS_NAME_OPEN = 'is-open';
 export const CLASS_NAME_TRANSITIONING = 'is-transitioning';
 export const CLASS_NAME_VISIBLE = 'is-visible';
+export const CLASS_NAME_LINK_UNDERLINED = 'link-underlined';
+export const CLASS_NAME_LINK_DISABLED = 'link-disabled';
 
 export const DEFAULT_TOAST_AUTO_CLOSE_INTERVAL = 3000; // milliseconds
diff --git a/packages/web/src/scss/components/Toast/README.md b/packages/web/src/scss/components/Toast/README.md
index e971b274b4..508d0db584 100644
--- a/packages/web/src/scss/components/Toast/README.md
+++ b/packages/web/src/scss/components/Toast/README.md
@@ -6,6 +6,8 @@ Toast is a composition of a few subcomponents:
 
 - [Toast](#toast)
   - [ToastBar](#toastbar)
+    - [ToastBarMessage](#toastbarmessage)
+    - [ToastBarLink](#toastbarlink)
 
 ## JavaScript Plugin
 
@@ -164,8 +166,10 @@ Minimum example:
 ```html
 <div class="ToastBar ToastBar--inverted">
   <div class="ToastBar__box">
-    <div class="ToastBar__content">
-      <div class="ToastBar__message">Message only</div>
+    <div class="ToastBar__container">
+      <div class="ToastBar__content">
+        <div class="text-truncate-multiline" data-spirit-populate-field="message">Message only</div>
+      </div>
     </div>
   </div>
 </div>
@@ -178,27 +182,53 @@ An icon can be added to the ToastBar component:
 ```html
 <div class="ToastBar ToastBar--inverted">
   <div class="ToastBar__box">
-    <div class="ToastBar__content">
+    <div class="ToastBar__container">
       <svg width="20" height="20" aria-hidden="true">
         <use xlink:href="/icons/svg/sprite.svg#info" />
       </svg>
-      <div class="ToastBar__message">Message with icon</div>
+      <div class="ToastBar__content">
+        <div class="text-truncate-multiline" data-spirit-populate-field="message">Message with icon</div>
+      </div>
     </div>
   </div>
 </div>
 ```
 
-### Action Link
+### ToastBar Components
+
+The content of `ToastBar` can be assembled from the following subcomponents:
 
-An action link can be added to the ToastBar component:
+#### ToastBarMessage
+
+`ToastBarMessage` is a subcomponent designated for the main message in `ToastBar`.
+
+Usage example:
 
 ```html
 <div class="ToastBar ToastBar--inverted">
   <div class="ToastBar__box">
-    <div class="ToastBar__content">
-      <div class="ToastBar__message">
-        Message with action
-        <a href="#" class="link-inverted link-underlined">Action</a>
+    <div class="ToastBar__container">
+      <div class="ToastBar__content">
+        <div class="text-truncate-multiline">Message with action</div>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+#### ToastBarLink
+
+`ToastBarLink` is a subcomponent designated to create an action link within `ToastBar`.
+
+Usage example:
+
+```html
+<div class="ToastBar ToastBar--inverted">
+  <div class="ToastBar__box">
+    <div class="ToastBar__container">
+      <div class="ToastBar__content">
+        <div class="text-truncate-multiline">Message with action</div>
+        <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
       </div>
     </div>
   </div>
@@ -219,8 +249,10 @@ For example:
 ```html
 <div class="ToastBar ToastBar--success">
   <div class="ToastBar__box">
-    <div class="ToastBar__content">
-      <div class="ToastBar__message">Success message</div>
+    <div class="ToastBar__container">
+      <div class="ToastBar__content">
+        <div class="text-truncate-multiline">Success message</div>
+      </div>
     </div>
   </div>
 </div>
@@ -256,8 +288,10 @@ button:
 ```html
 <div id="my-dismissible-toast" class="ToastBar ToastBar--inverted ToastBar--dismissible">
   <div class="ToastBar__box">
-    <div class="ToastBar__content">
-      <div class="ToastBar__message">Dismissible message</div>
+    <div class="ToastBar__container">
+      <div class="ToastBar__content">
+        <div class="ToastBar__message">Dismissible message</div>
+      </div>
     </div>
     <button
       type="button"
@@ -298,13 +332,13 @@ button:
     <!-- ToastBar: start -->
     <div id="my-dismissible-toast" class="ToastBar ToastBar--inverted ToastBar--dismissible is-hidden">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
             <use xlink:href="/icons/svg/sprite.svg#info" />
           </svg>
-          <div class="ToastBar__message">
-            Toast message
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline">Toast message</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -341,11 +375,14 @@ the template and apply it on any toasts to be shown to the user, using the confi
     <template data-spirit-snippet="item">
       <div class="ToastBar is-hidden" data-spirit-color="inverted" data-spirit-populate-field="item">
         <div class="ToastBar__box">
-          <div class="ToastBar__content">
+          <div class="ToastBar__container">
             <svg width="20" height="20" aria-hidden="true" data-spirit-populate-field="icon">
               <use xlink:href="/icons/svg/sprite.svg#info" />
             </svg>
-            <div class="ToastBar__message" data-spirit-populate-field="message"></div>
+            <div class="ToastBar__content">
+              <div class="text-truncate-multiline" data-spirit-populate-field="message"></div>
+              <a href="#" class="link-inverted link-underlined ToastBar__link" data-spirit-populate-field="link"></a>
+            </div>
           </div>
           <button
             type="button"
@@ -373,11 +410,19 @@ Then configure and create a new Toast instance and call the `show` method on it,
 import Toast from '@lmc-eu/spirit-web/dist/js/Toast';
 
 const toast = new Toast(null, {
-  autoCloseInterval: 3000 // Set interval after ToastBar will be closed in ms, default: 3000
+  autoCloseInterval: 3000, // Set interval after ToastBar will be closed in ms, default: 3000
   color: 'informative', // One of ['inverted' (default), 'success', 'warning, 'danger', 'informative']
   containerId: 'toast-example', // Must match the ID of the Toast container in HTML
-  content: 'Hello, this is my toast message!', // Can be plain text or HTML
   enableAutoClose: true, // If true, ToastBar will close after `autoCloseInterval`, default: true
+  message: 'Hello, this is my toast message!', // Can be plain text or HTML
+  linkContent: 'Action', // Link text
+  linkProps: {
+    href: 'https://example.com', // Link URL
+    target: '_blank', // Optional link target attribute
+    isUnderlined: false, // Optional link underlining, default: true
+    isDisabled: false, // Optional link disabling, default: false
+    elementType: 'a', // Optional link element type, default: 'a'
+  },
   hasIcon: true,
   iconName: 'info', // Optional icon name used as the #fragment in the SVG sprite URL
   id: 'my-toast', // An ID is required for dismissible ToastBar
diff --git a/packages/web/src/scss/components/Toast/_ToastBar.scss b/packages/web/src/scss/components/Toast/_ToastBar.scss
index 153634b4f0..39941cc3a6 100644
--- a/packages/web/src/scss/components/Toast/_ToastBar.scss
+++ b/packages/web/src/scss/components/Toast/_ToastBar.scss
@@ -48,17 +48,17 @@
     align-items: start;
 }
 
-.ToastBar__content:has(> svg:first-child) {
+.ToastBar__container:has(> svg:first-child) {
     display: grid;
     grid-template-columns: auto 1fr;
     column-gap: theme.$bar-content-gap;
 }
 
-.ToastBar:is(.ToastBar--dismissible, :has([data-spirit-dismiss='toast'])) .ToastBar__content {
+.ToastBar:is(.ToastBar--dismissible, :has([data-spirit-dismiss='toast'])) .ToastBar__container {
     align-self: center; // 4.
 }
 
-.ToastBar__message {
+.ToastBar__content {
     @include typography.generate(theme.$bar-typography);
 
     display: flex;
@@ -66,14 +66,12 @@
     gap: theme.$bar-message-gap-y theme.$bar-message-gap-x;
 }
 
-.ToastBar__message > :is(a, button):last-child {
+.ToastBar__link {
     font-weight: 400;
 }
 
 // stylelint-disable-next-line selector-max-specificity -- Specificity is needed to precisely target the action.
-.ToastBar:is(.ToastBar--dismissible, :has([data-spirit-dismiss='toast']))
-    .ToastBar__message
-    > :is(a, button):last-child {
+.ToastBar:is(.ToastBar--dismissible, :has([data-spirit-dismiss='toast'])) .ToastBar__link {
     margin-inline-end: theme.$bar-action-margin-inline-end; // 6.
 }
 
diff --git a/packages/web/src/scss/components/Toast/dynamic-toast.mjs b/packages/web/src/scss/components/Toast/dynamic-toast.mjs
index 773fc621b8..1070810fd2 100644
--- a/packages/web/src/scss/components/Toast/dynamic-toast.mjs
+++ b/packages/web/src/scss/components/Toast/dynamic-toast.mjs
@@ -6,8 +6,14 @@ export const addDynamicToast = (event, containerId) => {
     containerId,
     autoCloseInterval: formElement.querySelector('#toast-auto-close-interval').value,
     color: formElement.querySelector('#toast-color').value,
-    content: formElement.querySelector('#toast-content').value,
     enableAutoClose: formElement.querySelector('#toast-enable-auto-close').checked,
+    message: formElement.querySelector('#toast-message').value,
+    linkContent: formElement.querySelector('#toast-enable-link').checked
+      ? formElement.querySelector('#toast-link').value
+      : null,
+    linkProps: {
+      href: '#',
+    },
     hasIcon: formElement.querySelector('#toast-has-icon').checked,
     id: `my-dynamic-toast-${Date.now()}`,
     isDismissible: formElement.querySelector('#toast-is-dismissible').checked,
diff --git a/packages/web/src/scss/components/Toast/index.html b/packages/web/src/scss/components/Toast/index.html
index 0de0ff5e08..8ac6253dd7 100644
--- a/packages/web/src/scss/components/Toast/index.html
+++ b/packages/web/src/scss/components/Toast/index.html
@@ -26,12 +26,12 @@ <h2 class="docs-Heading">Static Toast</h2>
 
         <div id="my-hidden-dismissible-toast" class="ToastBar ToastBar--warning ToastBar--dismissible is-hidden">
           <div class="ToastBar__box">
-            <div class="ToastBar__content">
+            <div class="ToastBar__container">
               <svg width="20" height="20" aria-hidden="true">
-                <use xlink:href="/assets/icons/svg/sprite.svg#warning" />
+                <use xlink:href="/assets/icons/svg/sprite.svg#warning"/>
               </svg>
-              <div class="ToastBar__message">
-                I was hidden and you exposed me!
+              <div class="ToastBar__content">
+                <div class="text-truncate-multiline">I was hidden and you exposed me!</div>
               </div>
             </div>
             <button
@@ -43,7 +43,7 @@ <h2 class="docs-Heading">Static Toast</h2>
               aria-expanded="true"
             >
               <svg width="24" height="24" aria-hidden="true">
-                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+                <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
               </svg>
               <span class="accessibility-hidden">Close</span>
             </button>
@@ -88,7 +88,8 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
     <form>
       <fieldset onchange="setToastCollapsing(event, '#toast-example')" style="border: 0;">
         <label for="toast-is-collapsible" class="Checkbox">
-          <input type="checkbox" id="toast-is-collapsible" class="Checkbox__input" name="is-collapsible" autocomplete="off" checked />
+          <input type="checkbox" id="toast-is-collapsible" class="Checkbox__input" name="is-collapsible"
+                 autocomplete="off" checked/>
           <span class="Checkbox__text">
             <span class="Checkbox__label">Collapsible</span>
           </span>
@@ -97,13 +98,15 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
       <fieldset onchange="setToastAlignmentY(event, '#toast-example')" style="border: 0;">
         <legend>Vertical alignment:</legend>
         <label for="toast-alignment-top" class="Radio mr-600">
-          <input type="radio" id="toast-alignment-top" name="toast-alignment-y" value="top" class="Radio__input" autocomplete="off" />
+          <input type="radio" id="toast-alignment-top" name="toast-alignment-y" value="top" class="Radio__input"
+                 autocomplete="off"/>
           <span class="Radio__text">
             <span class="Radio__label">Top</span>
           </span>
         </label>
         <label for="toast-alignment-bottom" class="Radio mr-600">
-          <input type="radio" id="toast-alignment-bottom" name="toast-alignment-y" value="bottom" class="Radio__input" autocomplete="off" checked />
+          <input type="radio" id="toast-alignment-bottom" name="toast-alignment-y" value="bottom" class="Radio__input"
+                 autocomplete="off" checked/>
           <span class="Radio__text">
             <span class="Radio__label">Bottom</span>
           </span>
@@ -112,19 +115,22 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
       <fieldset onchange="setToastAlignmentX(event, '#toast-example')" style="border: 0;">
         <legend>Horizontal alignment:</legend>
         <label for="toast-alignment-left" class="Radio mr-600">
-          <input type="radio" id="toast-alignment-left" name="toast-alignment-x" value="left" class="Radio__input" autocomplete="off" />
+          <input type="radio" id="toast-alignment-left" name="toast-alignment-x" value="left" class="Radio__input"
+                 autocomplete="off"/>
           <span class="Radio__text">
             <span class="Radio__label">Left</span>
           </span>
         </label>
         <label for="toast-alignment-center" class="Radio mr-600">
-          <input type="radio" id="toast-alignment-center" name="toast-alignment-x" value="center" class="Radio__input" autocomplete="off" checked />
+          <input type="radio" id="toast-alignment-center" name="toast-alignment-x" value="center" class="Radio__input"
+                 autocomplete="off" checked/>
           <span class="Radio__text">
             <span class="Radio__label">Center</span>
           </span>
         </label>
         <label for="toast-alignment-right" class="Radio mr-600">
-          <input type="radio" id="toast-alignment-right" name="toast-alignment-x" value="right" class="Radio__input" autocomplete="off" />
+          <input type="radio" id="toast-alignment-right" name="toast-alignment-x" value="right" class="Radio__input"
+                 autocomplete="off"/>
           <span class="Radio__text">
             <span class="Radio__label">Right</span>
           </span>
@@ -135,7 +141,8 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
 
     <!-- Dynamic queue demo: start -->
     <script type="module">
-      import { addDynamicToast, clearQueue } from './dynamic-toast.mjs';
+      import {addDynamicToast, clearQueue} from './dynamic-toast.mjs';
+
       window.addDynamicToast = addDynamicToast;
       window.clearQueue = clearQueue;
 
@@ -149,6 +156,17 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
 
       // Initialize the field state.
       autoCloseIntervalField.disabled = !enableAutoCloseCheckbox.checked;
+
+      // Disable link props fields if enable link is not checked.
+      const linkField = document.getElementById('toast-link');
+      const enableLinkFieldCheckbox = document.getElementById('toast-enable-link');
+
+      enableLinkFieldCheckbox.addEventListener('change', (event) => {
+        linkField.disabled = !event.target.checked;
+      });
+
+      // Initialize the field state.
+      linkField.disabled = !enableLinkFieldCheckbox.checked;
     </script>
 
     <form>
@@ -167,36 +185,53 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
               </select>
               <div class="Select__icon">
                 <svg width="24" height="24" aria-hidden="true">
-                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
+                  <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down"/>
                 </svg>
               </div>
             </div>
           </div>
           <label for="toast-has-icon" class="Checkbox">
-            <input type="checkbox" id="toast-has-icon" class="Checkbox__input" name="is-dismissible" autocomplete="off" checked />
+            <input type="checkbox" id="toast-has-icon" class="Checkbox__input" name="is-dismissible" autocomplete="off"
+                   checked/>
             <span class="Checkbox__text">
               <span class="Checkbox__label">Has icon</span>
             </span>
           </label>
           <label for="toast-is-dismissible" class="Checkbox">
-            <input type="checkbox" id="toast-is-dismissible" class="Checkbox__input" name="is-dismissible" autocomplete="off" checked />
+            <input type="checkbox" id="toast-is-dismissible" class="Checkbox__input" name="is-dismissible"
+                   autocomplete="off" checked/>
             <span class="Checkbox__text">
               <span class="Checkbox__label">Dismissible</span>
             </span>
           </label>
           <label for="toast-enable-auto-close" class="Checkbox">
-            <input type="checkbox" id="toast-enable-auto-close" class="Checkbox__input" name="enable-auto-close" autocomplete="off" checked />
+            <input type="checkbox" id="toast-enable-auto-close" class="Checkbox__input" name="enable-auto-close"
+                   autocomplete="off" checked/>
             <span class="Checkbox__text">
               <span class="Checkbox__label">Enable AutoClose</span>
             </span>
           </label>
           <div class="TextField">
             <label for="textFieldDefault" class="TextField__label">AutoClose interval (ms)</label>
-            <input type="number" min="0" max="60000" step="500" value="3000" id="toast-auto-close-interval" name="auto-close-interval" class="TextField__input" />
+            <input type="number" min="0" max="60000" step="500" value="3000" id="toast-auto-close-interval"
+                   name="auto-close-interval" class="TextField__input"/>
           </div>
           <div class="TextArea">
-            <label for="toast-content" class="TextArea__label">Message</label>
-            <textarea id="toast-content" class="TextArea__input" autocomplete="off">This is a new toast message.</textarea>
+            <label for="toast-message" class="TextArea__label">Message</label>
+            <textarea id="toast-message" class="TextArea__input"
+                      autocomplete="off">This is a new toast message.</textarea>
+            <div class="TextArea__helperText">Can contain HTML.</div>
+          </div>
+          <label for="toast-enable-link" class="Checkbox">
+            <input type="checkbox" id="toast-enable-link" class="Checkbox__input" name="enable-link" autocomplete="off"
+                   checked/>
+            <span class="Checkbox__text">
+              <span class="Checkbox__label">Add link</span>
+            </span>
+          </label>
+          <div class="TextArea">
+            <label for="toast-link" class="TextArea__label">Link</label>
+            <textarea id="toast-link" class="TextArea__input" autocomplete="off">This is a toast link.</textarea>
             <div class="TextArea__helperText">Can contain HTML.</div>
           </div>
           <div>
@@ -232,8 +267,9 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
       <fieldset style="border: 0;">
         <legend class="mb-500">Virtual keyboard interaction:</legend>
         <div class="TextField">
-          <label for="text-field-for-focus" class="TextField__label">In Chrome on Android, tap into this text field to see how Toast position updates:</label>
-          <input type="text" id="text-field-for-focus" class="TextField__input" name="default" placeholder="Tap here!" />
+          <label for="text-field-for-focus" class="TextField__label">In Chrome on Android, tap into this text field to
+            see how Toast position updates:</label>
+          <input type="text" id="text-field-for-focus" class="TextField__input" name="default" placeholder="Tap here!"/>
         </div>
       </fieldset>
     </form>
@@ -245,11 +281,14 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
         <template data-spirit-snippet="item">
           <div class="ToastBar is-hidden" data-spirit-color="inverted" data-spirit-populate-field="item">
             <div class="ToastBar__box">
-              <div class="ToastBar__content">
+              <div class="ToastBar__container">
                 <svg width="20" height="20" aria-hidden="true" data-spirit-populate-field="icon">
-                  <use xlink:href="/assets/icons/svg/sprite.svg#info" />
+                  <use xlink:href="/assets/icons/svg/sprite.svg#info"/>
                 </svg>
-                <div class="ToastBar__message" data-spirit-populate-field="message"></div>
+                <div class="ToastBar__content">
+                  <div class="text-truncate-multiline" data-spirit-populate-field="message"></div>
+                  <a class="ToastBar__link" data-spirit-populate-field="link"></a>
+                </div>
               </div>
               <button
                 type="button"
@@ -260,7 +299,7 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
                 aria-expanded="true"
               >
                 <svg width="24" height="24" aria-hidden="true">
-                  <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+                  <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
                 </svg>
                 <span class="accessibility-hidden">Close</span>
               </button>
@@ -270,13 +309,13 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
 
         <div id="my-dismissible-toast" class="ToastBar ToastBar--success ToastBar--dismissible is-visible">
           <div class="ToastBar__box">
-            <div class="ToastBar__content">
+            <div class="ToastBar__container">
               <svg width="20" height="20" aria-hidden="true">
-                <use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
+                <use xlink:href="/assets/icons/svg/sprite.svg#check-plain"/>
               </svg>
-              <div class="ToastBar__message">
-                I was first!
-                <a href="#" class="link-inverted link-underlined">Action</a>
+              <div class="ToastBar__content">
+                <div class="text-truncate-multiline">I was first!</div>
+                <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
               </div>
             </div>
             <button
@@ -288,7 +327,7 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
               aria-expanded="true"
             >
               <svg width="24" height="24" aria-hidden="true">
-                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+                <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
               </svg>
               <span class="accessibility-hidden">Close</span>
             </button>
@@ -297,13 +336,15 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
 
         <div id="my-other-dismissible-toast" class="ToastBar ToastBar--informative ToastBar--dismissible is-visible">
           <div class="ToastBar__box">
-            <div class="ToastBar__content">
+            <div class="ToastBar__container">
               <svg width="20" height="20" aria-hidden="true">
-                <use xlink:href="/assets/icons/svg/sprite.svg#info" />
+                <use xlink:href="/assets/icons/svg/sprite.svg#info"/>
               </svg>
-              <div class="ToastBar__message">
-                I appeared later. This toast has a long message that wraps automatically.
-                <a href="#" class="link-inverted link-underlined">Action</a>
+              <div class="ToastBar__content">
+                <div class="text-truncate-multiline">I appeared later. This toast has a long message that wraps
+                  automatically.
+                </div>
+                <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
               </div>
             </div>
             <button
@@ -315,7 +356,7 @@ <h2 class="docs-Heading">Dynamic Toast Queue</h2>
               aria-expanded="true"
             >
               <svg width="24" height="24" aria-hidden="true">
-                <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+                <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
               </svg>
               <span class="accessibility-hidden">Close</span>
             </button>
@@ -337,9 +378,9 @@ <h2 class="docs-Heading">Content Variations</h2>
 
     <div class="ToastBar ToastBar--inverted">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
-          <div class="ToastBar__message">
-            Message only
+        <div class="ToastBar__container">
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline">Message only</div>
           </div>
         </div>
       </div>
@@ -347,10 +388,10 @@ <h2 class="docs-Heading">Content Variations</h2>
 
     <div class="ToastBar ToastBar--inverted">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
-          <div class="ToastBar__message">
-            Message with action
-            <a href="#" class="link-inverted link-underlined">Action</a>
+        <div class="ToastBar__container">
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline">Message with action</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
       </div>
@@ -358,10 +399,12 @@ <h2 class="docs-Heading">Content Variations</h2>
 
     <div class="ToastBar ToastBar--inverted">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
-          <div class="ToastBar__message">
-            When the text is long and reaches the maximum width limit, the action automatically wraps to the next line.
-            <a href="#" class="link-inverted link-underlined">Action</a>
+        <div class="ToastBar__container">
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline">When the text is long and reaches the maximum width limit, the action
+              automatically wraps to the next line.
+            </div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
       </div>
@@ -369,13 +412,13 @@ <h2 class="docs-Heading">Content Variations</h2>
 
     <div class="ToastBar ToastBar--inverted">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#info" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#info"/>
           </svg>
-          <div class="ToastBar__message">
-            Message with icon and action
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline">Message with icon and action</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
       </div>
@@ -383,9 +426,9 @@ <h2 class="docs-Heading">Content Variations</h2>
 
     <div id="my-toast-variation-dismissible" class="ToastBar ToastBar--inverted ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
-          <div class="ToastBar__message">
-            Dismissible message
+        <div class="ToastBar__container">
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline">Dismissible message</div>
           </div>
         </div>
         <button
@@ -396,22 +439,23 @@ <h2 class="docs-Heading">Content Variations</h2>
           aria-expanded="true"
         >
           <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
           </svg>
           <span class="accessibility-hidden">Close</span>
         </button>
       </div>
     </div>
 
-    <div id="my-toast-variation-dismissible-with-icon-and-action" class="ToastBar ToastBar--inverted ToastBar--dismissible">
+    <div id="my-toast-variation-dismissible-with-icon-and-action"
+         class="ToastBar ToastBar--inverted ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#download" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#download"/>
           </svg>
-          <div class="ToastBar__message">
-            Dismissible message with custom icon and action
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline">Dismissible message with custom icon and action</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -422,7 +466,7 @@ <h2 class="docs-Heading">Content Variations</h2>
           aria-expanded="true"
         >
           <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
           </svg>
           <span class="accessibility-hidden">Close</span>
         </button>
@@ -440,13 +484,13 @@ <h2 class="docs-Heading">Colors</h2>
 
     <div id="my-toast-color-inverted" class="ToastBar ToastBar--inverted ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#info" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#info"/>
           </svg>
-          <div class="ToastBar__message">
-            Inverted
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline">Inverted</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -457,7 +501,7 @@ <h2 class="docs-Heading">Colors</h2>
           aria-expanded="true"
         >
           <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
           </svg>
           <span class="accessibility-hidden">Close</span>
         </button>
@@ -466,13 +510,13 @@ <h2 class="docs-Heading">Colors</h2>
 
     <div id="my-toast-color-informative" class="ToastBar ToastBar--informative ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#info" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#info"/>
           </svg>
-          <div class="ToastBar__message">
-            Informative
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline">Informative</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -483,7 +527,7 @@ <h2 class="docs-Heading">Colors</h2>
           aria-expanded="true"
         >
           <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
           </svg>
           <span class="accessibility-hidden">Close</span>
         </button>
@@ -492,13 +536,13 @@ <h2 class="docs-Heading">Colors</h2>
 
     <div id="my-toast-color-success" class="ToastBar ToastBar--success ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#check-plain" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#check-plain"/>
           </svg>
-          <div class="ToastBar__message">
-            Success
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline">Success</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -509,7 +553,7 @@ <h2 class="docs-Heading">Colors</h2>
           aria-expanded="true"
         >
           <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
           </svg>
           <span class="accessibility-hidden">Close</span>
         </button>
@@ -518,13 +562,13 @@ <h2 class="docs-Heading">Colors</h2>
 
     <div id="my-toast-color-warning" class="ToastBar ToastBar--warning ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#warning" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#warning"/>
           </svg>
-          <div class="ToastBar__message">
-            Warning
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline">Warning</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -535,7 +579,7 @@ <h2 class="docs-Heading">Colors</h2>
           aria-expanded="true"
         >
           <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
           </svg>
           <span class="accessibility-hidden">Close</span>
         </button>
@@ -544,13 +588,13 @@ <h2 class="docs-Heading">Colors</h2>
 
     <div id="my-toast-color-danger" class="ToastBar ToastBar--danger ToastBar--dismissible">
       <div class="ToastBar__box">
-        <div class="ToastBar__content">
+        <div class="ToastBar__container">
           <svg width="20" height="20" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#danger" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#danger"/>
           </svg>
-          <div class="ToastBar__message">
-            Danger
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline">Danger</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -561,7 +605,7 @@ <h2 class="docs-Heading">Colors</h2>
           aria-expanded="true"
         >
           <svg width="24" height="24" aria-hidden="true">
-            <use xlink:href="/assets/icons/svg/sprite.svg#close" />
+            <use xlink:href="/assets/icons/svg/sprite.svg#close"/>
           </svg>
           <span class="accessibility-hidden">Close</span>
         </button>
diff --git a/tests/e2e/demo-components-compare.spec.ts-snapshots/toast-chromium-linux.png b/tests/e2e/demo-components-compare.spec.ts-snapshots/toast-chromium-linux.png
index 9d56124be7..294777b7b9 100644
Binary files a/tests/e2e/demo-components-compare.spec.ts-snapshots/toast-chromium-linux.png and b/tests/e2e/demo-components-compare.spec.ts-snapshots/toast-chromium-linux.png differ