diff --git a/packages/web/src/scss/components/Toast/README.md b/packages/web/src/scss/components/Toast/README.md
index 72d64e3aaf..331c5e68eb 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,33 +182,75 @@ 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>
+```
+
+### ToastBar Components
+
+The content of `ToastBar` can be assembled from the following components:
+
+#### ToastBarMessage
+
+`ToastBarMessage` is a component designates for main message in `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" data-spirit-populate-field="message">Message with action</div>
+      </div>
     </div>
   </div>
 </div>
 ```
 
-### Action Link
+#### API
+
+| Name       | Type     | Default | Required | Description                    |
+| ---------- | -------- | ------- | -------- | ------------------------------ |
+| `children` | `string` | —       | ✔        | Content of the ToastBarMessage |
+
+#### ToastBarLink
 
-An action link can be added to the ToastBar component:
+`ToastBarLink` is a component designated to create an action link within `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" data-spirit-populate-field="message">Message with action</div>
+        <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
       </div>
     </div>
   </div>
 </div>
 ```
 
+#### API
+
+| Name           | Type                                             | Default    | Required | Description                    |
+| -------------- | ------------------------------------------------ | ---------- | -------- | ------------------------------ |
+| `children`     | `string`                                         | —          | ✔        | Content of the ToastBarLink    |
+| `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 |
+
 👉 **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
 [Toast accessibility][scott-o-hara-toast] at Scott O'Hara's blog.
@@ -219,8 +265,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" data-spirit-populate-field="message">Success message</div>
+      </div>
     </div>
   </div>
 </div>
@@ -256,7 +304,7 @@ button:
 ```html
 <div id="my-dismissible-toast" class="ToastBar ToastBar--inverted ToastBar--dismissible">
   <div class="ToastBar__box">
-    <div class="ToastBar__content">
+    <div class="ToastBar__container">
       <div class="ToastBar__message">Dismissible message</div>
     </div>
     <button
@@ -298,13 +346,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" data-spirit-populate-field="message">Toast message</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -341,11 +389,13 @@ 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>
+            </div>
           </div>
           <button
             type="button"
diff --git a/packages/web/src/scss/components/Toast/_ToastBar.scss b/packages/web/src/scss/components/Toast/_ToastBar.scss
index 7255b4e4aa..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__container {
+.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__container > :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__container
-    > :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/index.html b/packages/web/src/scss/components/Toast/index.html
index d60f262131..0b1235c4d0 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" />
               </svg>
-              <div class="ToastBar__message">
-                I was hidden and you exposed me!
+              <div class="ToastBar__content">
+                <div class="text-truncate-multiline" data-spirit-populate-field="message">I was hidden and you exposed me!</div>
               </div>
             </div>
             <button
@@ -224,11 +224,13 @@ <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" />
                 </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>
+                </div>
               </div>
               <button
                 type="button"
@@ -249,13 +251,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" />
               </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" data-spirit-populate-field="message">I was first!</div>
+                <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
               </div>
             </div>
             <button
@@ -276,13 +278,13 @@ <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" />
               </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" data-spirit-populate-field="message">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
@@ -316,9 +318,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" data-spirit-populate-field="message">Message only</div>
           </div>
         </div>
       </div>
@@ -326,10 +328,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" data-spirit-populate-field="message">Message with action</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
       </div>
@@ -337,10 +339,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">
-            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" data-spirit-populate-field="message">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>
@@ -348,13 +350,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" />
           </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" data-spirit-populate-field="message">Message with icon and action</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
       </div>
@@ -362,9 +364,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" data-spirit-populate-field="message">Dismissible message</div>
           </div>
         </div>
         <button
@@ -384,13 +386,13 @@ <h2 class="docs-Heading">Content Variations</h2>
 
     <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" />
           </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" data-spirit-populate-field="message">Dismissible message with custom icon and action</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -419,13 +421,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" />
           </svg>
-          <div class="ToastBar__message">
-            Inverted
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline" data-spirit-populate-field="message">Inverted</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -445,13 +447,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" />
           </svg>
-          <div class="ToastBar__message">
-            Informative
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline" data-spirit-populate-field="message">Informative</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -471,13 +473,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" />
           </svg>
-          <div class="ToastBar__message">
-            Success
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline" data-spirit-populate-field="message">Success</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -497,13 +499,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" />
           </svg>
-          <div class="ToastBar__message">
-            Warning
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline" data-spirit-populate-field="message">Warning</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
@@ -523,13 +525,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" />
           </svg>
-          <div class="ToastBar__message">
-            Danger
-            <a href="#" class="link-inverted link-underlined">Action</a>
+          <div class="ToastBar__content">
+            <div class="text-truncate-multiline" data-spirit-populate-field="message">Danger</div>
+            <a href="#" class="link-inverted link-underlined ToastBar__link">Action</a>
           </div>
         </div>
         <button
diff --git a/packages/web/src/scss/settings/_feature-flags.scss b/packages/web/src/scss/settings/_feature-flags.scss
deleted file mode 100644
index e69de29bb2..0000000000