diff --git a/js/src/toast.js b/js/src/toast.js
index 4c3ea2f63ef3..05a05090ba70 100644
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -8,7 +8,6 @@
 import BaseComponent from './base-component.js'
 import EventHandler from './dom/event-handler.js'
 import { enableDismissTrigger } from './util/component-functions.js'
-import { reflow } from './util/index.js'
 
 /**
  * Constants
@@ -18,57 +17,28 @@ const NAME = 'toast'
 const DATA_KEY = 'bs.toast'
 const EVENT_KEY = `.${DATA_KEY}`
 
-const EVENT_MOUSEOVER = `mouseover${EVENT_KEY}`
-const EVENT_MOUSEOUT = `mouseout${EVENT_KEY}`
-const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
-const EVENT_FOCUSOUT = `focusout${EVENT_KEY}`
 const EVENT_HIDE = `hide${EVENT_KEY}`
 const EVENT_HIDDEN = `hidden${EVENT_KEY}`
 const EVENT_SHOW = `show${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
 
-const CLASS_NAME_FADE = 'fade'
-const CLASS_NAME_HIDE = 'hide' // @deprecated - kept here only for backwards compatibility
 const CLASS_NAME_SHOW = 'show'
-const CLASS_NAME_SHOWING = 'showing'
-
-const DefaultType = {
-  animation: 'boolean',
-  autohide: 'boolean',
-  delay: 'number'
-}
-
-const Default = {
-  animation: true,
-  autohide: true,
-  delay: 5000
-}
+const ANIMATION_NAME_AUTOHIDE = 'toast-autohide'
 
 /**
  * Class definition
  */
 
 class Toast extends BaseComponent {
-  constructor(element, config) {
-    super(element, config)
-
-    this._timeout = null
-    this._hasMouseInteraction = false
-    this._hasKeyboardInteraction = false
-    this._setListeners()
-  }
-
   // Getters
-  static get Default() {
-    return Default
+  static get NAME() {
+    return NAME
   }
 
-  static get DefaultType() {
-    return DefaultType
-  }
+  constructor(element, config) {
+    super(element, config)
 
-  static get NAME() {
-    return NAME
+    EventHandler.on(this._element, 'animationend', event => this._onAnimationEnd(event))
   }
 
   // Public
@@ -79,118 +49,26 @@ class Toast extends BaseComponent {
       return
     }
 
-    this._clearTimeout()
-
-    if (this._config.animation) {
-      this._element.classList.add(CLASS_NAME_FADE)
-    }
-
-    const complete = () => {
-      this._element.classList.remove(CLASS_NAME_SHOWING)
-      EventHandler.trigger(this._element, EVENT_SHOWN)
-
-      this._maybeScheduleHide()
-    }
-
-    this._element.classList.remove(CLASS_NAME_HIDE) // @deprecated
-    reflow(this._element)
-    this._element.classList.add(CLASS_NAME_SHOW, CLASS_NAME_SHOWING)
-
-    this._queueCallback(complete, this._element, this._config.animation)
+    this._element.classList.add(CLASS_NAME_SHOW)
+    EventHandler.trigger(this._element, EVENT_SHOWN)
   }
 
   hide() {
-    if (!this.isShown()) {
-      return
-    }
-
     const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
 
     if (hideEvent.defaultPrevented) {
       return
     }
 
-    const complete = () => {
-      this._element.classList.add(CLASS_NAME_HIDE) // @deprecated
-      this._element.classList.remove(CLASS_NAME_SHOWING, CLASS_NAME_SHOW)
-      EventHandler.trigger(this._element, EVENT_HIDDEN)
-    }
-
-    this._element.classList.add(CLASS_NAME_SHOWING)
-    this._queueCallback(complete, this._element, this._config.animation)
-  }
-
-  dispose() {
-    this._clearTimeout()
-
-    if (this.isShown()) {
-      this._element.classList.remove(CLASS_NAME_SHOW)
-    }
-
-    super.dispose()
-  }
-
-  isShown() {
-    return this._element.classList.contains(CLASS_NAME_SHOW)
+    this._element.classList.remove(CLASS_NAME_SHOW)
+    EventHandler.trigger(this._element, EVENT_HIDDEN)
   }
 
   // Private
-  _maybeScheduleHide() {
-    if (!this._config.autohide) {
-      return
-    }
-
-    if (this._hasMouseInteraction || this._hasKeyboardInteraction) {
-      return
-    }
-
-    this._timeout = setTimeout(() => {
+  _onAnimationEnd(event) {
+    if (event.animationName === ANIMATION_NAME_AUTOHIDE) {
       this.hide()
-    }, this._config.delay)
-  }
-
-  _onInteraction(event, isInteracting) {
-    switch (event.type) {
-      case 'mouseover':
-      case 'mouseout': {
-        this._hasMouseInteraction = isInteracting
-        break
-      }
-
-      case 'focusin':
-      case 'focusout': {
-        this._hasKeyboardInteraction = isInteracting
-        break
-      }
-
-      default: {
-        break
-      }
     }
-
-    if (isInteracting) {
-      this._clearTimeout()
-      return
-    }
-
-    const nextElement = event.relatedTarget
-    if (this._element === nextElement || this._element.contains(nextElement)) {
-      return
-    }
-
-    this._maybeScheduleHide()
-  }
-
-  _setListeners() {
-    EventHandler.on(this._element, EVENT_MOUSEOVER, event => this._onInteraction(event, true))
-    EventHandler.on(this._element, EVENT_MOUSEOUT, event => this._onInteraction(event, false))
-    EventHandler.on(this._element, EVENT_FOCUSIN, event => this._onInteraction(event, true))
-    EventHandler.on(this._element, EVENT_FOCUSOUT, event => this._onInteraction(event, false))
-  }
-
-  _clearTimeout() {
-    clearTimeout(this._timeout)
-    this._timeout = null
   }
 }
 
diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js
index 7dcf82de89e6..bd6cfd8c79f4 100644
--- a/js/tests/unit/toast.spec.js
+++ b/js/tests/unit/toast.spec.js
@@ -1,6 +1,6 @@
 import Toast from '../../src/toast.js'
 import {
-  clearFixture, createEvent, getFixture
+  clearFixture, getFixture
 } from '../helpers/fixture.js'
 
 describe('Toast', () => {
@@ -14,599 +14,239 @@ describe('Toast', () => {
     clearFixture()
   })
 
-  describe('VERSION', () => {
-    it('should return plugin version', () => {
-      expect(Toast.VERSION).toEqual(jasmine.any(String))
-    })
-  })
+  describe('constructor', () => {
+    it('should create a Toast instance', () => {
+      fixtureEl.innerHTML = '<div class="toast"><div class="toast-body">a toast</div></div>'
+
+      const toastEl = fixtureEl.querySelector('.toast')
+      const toast = new Toast(toastEl)
 
-  describe('DATA_KEY', () => {
-    it('should return plugin data key', () => {
-      expect(Toast.DATA_KEY).toEqual('bs.toast')
+      expect(toast).toBeInstanceOf(Toast)
+      expect(Toast.getInstance(toastEl)).toBe(toast)
     })
   })
 
-  describe('constructor', () => {
-    it('should take care of element either passed as a CSS selector or DOM element', () => {
-      fixtureEl.innerHTML = '<div class="toast"></div>'
+  describe('show', () => {
+    it('should add .show class', () => {
+      fixtureEl.innerHTML = '<div class="toast"><div class="toast-body">a toast</div></div>'
 
       const toastEl = fixtureEl.querySelector('.toast')
-      const toastBySelector = new Toast('.toast')
-      const toastByElement = new Toast(toastEl)
-
-      expect(toastBySelector._element).toEqual(toastEl)
-      expect(toastByElement._element).toEqual(toastEl)
-    })
+      const toast = new Toast(toastEl)
 
-    it('should allow to config in js', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = [
-          '<div class="toast">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '  </div>',
-          '</div>'
-        ].join('')
-
-        const toastEl = fixtureEl.querySelector('div')
-        const toast = new Toast(toastEl, {
-          delay: 1
-        })
-
-        toastEl.addEventListener('shown.bs.toast', () => {
-          expect(toastEl).toHaveClass('show')
-          resolve()
-        })
-
-        toast.show()
-      })
-    })
+      expect(toastEl).not.toHaveClass('show')
 
-    it('should close toast when close element with data-bs-dismiss attribute is set', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = [
-          '<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
-          '  <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
-          '</div>'
-        ].join('')
+      toast.show()
 
-        const toastEl = fixtureEl.querySelector('div')
-        const toast = new Toast(toastEl)
+      expect(toastEl).toHaveClass('show')
+    })
 
-        toastEl.addEventListener('shown.bs.toast', () => {
-          expect(toastEl).toHaveClass('show')
+    it('should trigger show and shown events', () => {
+      fixtureEl.innerHTML = '<div class="toast"><div class="toast-body">a toast</div></div>'
 
-          const button = toastEl.querySelector('.btn-close')
+      const toastEl = fixtureEl.querySelector('.toast')
+      const toast = new Toast(toastEl)
+      const showSpy = jasmine.createSpy('show')
+      const shownSpy = jasmine.createSpy('shown')
 
-          button.click()
-        })
+      toastEl.addEventListener('show.bs.toast', showSpy)
+      toastEl.addEventListener('shown.bs.toast', shownSpy)
 
-        toastEl.addEventListener('hidden.bs.toast', () => {
-          expect(toastEl).not.toHaveClass('show')
-          resolve()
-        })
+      toast.show()
 
-        toast.show()
-      })
+      expect(showSpy).toHaveBeenCalled()
+      expect(shownSpy).toHaveBeenCalled()
     })
-  })
 
-  describe('Default', () => {
-    it('should expose default setting to allow to override them', () => {
-      const defaultDelay = 1000
+    it('should be preventable via show.bs.toast', () => {
+      fixtureEl.innerHTML = '<div class="toast"><div class="toast-body">a toast</div></div>'
 
-      Toast.Default.delay = defaultDelay
+      const toastEl = fixtureEl.querySelector('.toast')
+      const toast = new Toast(toastEl)
 
-      fixtureEl.innerHTML = [
-        '<div class="toast" data-bs-autohide="false" data-bs-animation="false">',
-        '  <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
-        '</div>'
-      ].join('')
+      toastEl.addEventListener('show.bs.toast', event => event.preventDefault())
 
-      const toastEl = fixtureEl.querySelector('div')
-      const toast = new Toast(toastEl)
+      toast.show()
 
-      expect(toast._config.delay).toEqual(defaultDelay)
+      expect(toastEl).not.toHaveClass('show')
     })
   })
 
-  describe('DefaultType', () => {
-    it('should expose default setting types for read', () => {
-      expect(Toast.DefaultType).toEqual(jasmine.any(Object))
-    })
-  })
+  describe('hide', () => {
+    it('should remove .show class', () => {
+      fixtureEl.innerHTML = '<div class="toast show"><div class="toast-body">a toast</div></div>'
 
-  describe('show', () => {
-    it('should auto hide', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = [
-          '<div class="toast" data-bs-delay="1">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '  </div>',
-          '</div>'
-        ].join('')
-
-        const toastEl = fixtureEl.querySelector('.toast')
-        const toast = new Toast(toastEl)
-
-        toastEl.addEventListener('hidden.bs.toast', () => {
-          expect(toastEl).not.toHaveClass('show')
-          resolve()
-        })
-
-        toast.show()
-      })
-    })
+      const toastEl = fixtureEl.querySelector('.toast')
+      const toast = new Toast(toastEl)
 
-    it('should not add fade class', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = [
-          '<div class="toast" data-bs-delay="1" data-bs-animation="false">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '  </div>',
-          '</div>'
-        ].join('')
-
-        const toastEl = fixtureEl.querySelector('.toast')
-        const toast = new Toast(toastEl)
-
-        toastEl.addEventListener('shown.bs.toast', () => {
-          expect(toastEl).not.toHaveClass('fade')
-          resolve()
-        })
-
-        toast.show()
-      })
-    })
+      expect(toastEl).toHaveClass('show')
 
-    it('should not trigger shown if show is prevented', () => {
-      return new Promise((resolve, reject) => {
-        fixtureEl.innerHTML = [
-          '<div class="toast" data-bs-delay="1" data-bs-animation="false">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '  </div>',
-          '</div>'
-        ].join('')
-
-        const toastEl = fixtureEl.querySelector('.toast')
-        const toast = new Toast(toastEl)
-
-        const assertDone = () => {
-          setTimeout(() => {
-            expect(toastEl).not.toHaveClass('show')
-            resolve()
-          }, 20)
-        }
-
-        toastEl.addEventListener('show.bs.toast', event => {
-          event.preventDefault()
-          assertDone()
-        })
-
-        toastEl.addEventListener('shown.bs.toast', () => {
-          reject(new Error('shown event should not be triggered if show is prevented'))
-        })
-
-        toast.show()
-      })
-    })
+      toast.hide()
 
-    it('should clear timeout if toast is shown again before it is hidden', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = [
-          '<div class="toast">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '  </div>',
-          '</div>'
-        ].join('')
-
-        const toastEl = fixtureEl.querySelector('.toast')
-        const toast = new Toast(toastEl)
-
-        setTimeout(() => {
-          toast._config.autohide = false
-          toastEl.addEventListener('shown.bs.toast', () => {
-            expect(spy).toHaveBeenCalled()
-            expect(toast._timeout).toBeNull()
-            resolve()
-          })
-          toast.show()
-        }, toast._config.delay / 2)
-
-        const spy = spyOn(toast, '_clearTimeout').and.callThrough()
-
-        toast.show()
-      })
+      expect(toastEl).not.toHaveClass('show')
     })
 
-    it('should clear timeout if toast is interacted with mouse', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = [
-          '<div class="toast">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '  </div>',
-          '</div>'
-        ].join('')
-
-        const toastEl = fixtureEl.querySelector('.toast')
-        const toast = new Toast(toastEl)
-        const spy = spyOn(toast, '_clearTimeout').and.callThrough()
-
-        setTimeout(() => {
-          spy.calls.reset()
-
-          toastEl.addEventListener('mouseover', () => {
-            expect(toast._clearTimeout).toHaveBeenCalledTimes(1)
-            expect(toast._timeout).toBeNull()
-            resolve()
-          })
-
-          const mouseOverEvent = createEvent('mouseover')
-          toastEl.dispatchEvent(mouseOverEvent)
-        }, toast._config.delay / 2)
-
-        toast.show()
-      })
-    })
+    it('should trigger hide and hidden events', () => {
+      fixtureEl.innerHTML = '<div class="toast show"><div class="toast-body">a toast</div></div>'
 
-    it('should clear timeout if toast is interacted with keyboard', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = [
-          '<button id="outside-focusable">outside focusable</button>',
-          '<div class="toast">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '    <button>with a button</button>',
-          '  </div>',
-          '</div>'
-        ].join('')
-
-        const toastEl = fixtureEl.querySelector('.toast')
-        const toast = new Toast(toastEl)
-        const spy = spyOn(toast, '_clearTimeout').and.callThrough()
-
-        setTimeout(() => {
-          spy.calls.reset()
-
-          toastEl.addEventListener('focusin', () => {
-            expect(toast._clearTimeout).toHaveBeenCalledTimes(1)
-            expect(toast._timeout).toBeNull()
-            resolve()
-          })
-
-          const insideFocusable = toastEl.querySelector('button')
-          insideFocusable.focus()
-        }, toast._config.delay / 2)
-
-        toast.show()
-      })
-    })
+      const toastEl = fixtureEl.querySelector('.toast')
+      const toast = new Toast(toastEl)
+      const hideSpy = jasmine.createSpy('hide')
+      const hiddenSpy = jasmine.createSpy('hidden')
 
-    it('should still auto hide after being interacted with mouse and keyboard', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = [
-          '<button id="outside-focusable">outside focusable</button>',
-          '<div class="toast">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '    <button>with a button</button>',
-          '  </div>',
-          '</div>'
-        ].join('')
-
-        const toastEl = fixtureEl.querySelector('.toast')
-        const toast = new Toast(toastEl)
-
-        setTimeout(() => {
-          toastEl.addEventListener('mouseover', () => {
-            const insideFocusable = toastEl.querySelector('button')
-            insideFocusable.focus()
-          })
-
-          toastEl.addEventListener('focusin', () => {
-            const mouseOutEvent = createEvent('mouseout')
-            toastEl.dispatchEvent(mouseOutEvent)
-          })
-
-          toastEl.addEventListener('mouseout', () => {
-            const outsideFocusable = document.getElementById('outside-focusable')
-            outsideFocusable.focus()
-          })
-
-          toastEl.addEventListener('focusout', () => {
-            expect(toast._timeout).not.toBeNull()
-            resolve()
-          })
-
-          const mouseOverEvent = createEvent('mouseover')
-          toastEl.dispatchEvent(mouseOverEvent)
-        }, toast._config.delay / 2)
-
-        toast.show()
-      })
-    })
+      toastEl.addEventListener('hide.bs.toast', hideSpy)
+      toastEl.addEventListener('hidden.bs.toast', hiddenSpy)
 
-    it('should not auto hide if focus leaves but mouse pointer remains inside', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = [
-          '<button id="outside-focusable">outside focusable</button>',
-          '<div class="toast">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '    <button>with a button</button>',
-          '  </div>',
-          '</div>'
-        ].join('')
-
-        const toastEl = fixtureEl.querySelector('.toast')
-        const toast = new Toast(toastEl)
-
-        setTimeout(() => {
-          toastEl.addEventListener('mouseover', () => {
-            const insideFocusable = toastEl.querySelector('button')
-            insideFocusable.focus()
-          })
-
-          toastEl.addEventListener('focusin', () => {
-            const outsideFocusable = document.getElementById('outside-focusable')
-            outsideFocusable.focus()
-          })
-
-          toastEl.addEventListener('focusout', () => {
-            expect(toast._timeout).toBeNull()
-            resolve()
-          })
-
-          const mouseOverEvent = createEvent('mouseover')
-          toastEl.dispatchEvent(mouseOverEvent)
-        }, toast._config.delay / 2)
-
-        toast.show()
-      })
-    })
+      toast.hide()
 
-    it('should not auto hide if mouse pointer leaves but focus remains inside', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = [
-          '<button id="outside-focusable">outside focusable</button>',
-          '<div class="toast">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '    <button>with a button</button>',
-          '  </div>',
-          '</div>'
-        ].join('')
-
-        const toastEl = fixtureEl.querySelector('.toast')
-        const toast = new Toast(toastEl)
-
-        setTimeout(() => {
-          toastEl.addEventListener('mouseover', () => {
-            const insideFocusable = toastEl.querySelector('button')
-            insideFocusable.focus()
-          })
-
-          toastEl.addEventListener('focusin', () => {
-            const mouseOutEvent = createEvent('mouseout')
-            toastEl.dispatchEvent(mouseOutEvent)
-          })
-
-          toastEl.addEventListener('mouseout', () => {
-            expect(toast._timeout).toBeNull()
-            resolve()
-          })
-
-          const mouseOverEvent = createEvent('mouseover')
-          toastEl.dispatchEvent(mouseOverEvent)
-        }, toast._config.delay / 2)
-
-        toast.show()
-      })
+      expect(hideSpy).toHaveBeenCalled()
+      expect(hiddenSpy).toHaveBeenCalled()
     })
-  })
 
-  describe('hide', () => {
-    it('should allow to hide toast manually', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = [
-          '<div class="toast" data-bs-delay="1" data-bs-autohide="false">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '  </div>',
-          '</div>'
-        ].join('')
-
-        const toastEl = fixtureEl.querySelector('.toast')
-        const toast = new Toast(toastEl)
-
-        toastEl.addEventListener('shown.bs.toast', () => {
-          toast.hide()
-        })
-
-        toastEl.addEventListener('hidden.bs.toast', () => {
-          expect(toastEl).not.toHaveClass('show')
-          resolve()
-        })
-
-        toast.show()
-      })
-    })
+    it('should be preventable via hide.bs.toast', () => {
+      fixtureEl.innerHTML = '<div class="toast show"><div class="toast-body">a toast</div></div>'
 
-    it('should do nothing when we call hide on a non shown toast', () => {
-      fixtureEl.innerHTML = '<div></div>'
-
-      const toastEl = fixtureEl.querySelector('div')
+      const toastEl = fixtureEl.querySelector('.toast')
       const toast = new Toast(toastEl)
 
-      const spy = spyOn(toastEl.classList, 'contains')
+      toastEl.addEventListener('hide.bs.toast', event => event.preventDefault())
 
       toast.hide()
 
-      expect(spy).toHaveBeenCalled()
-    })
-
-    it('should not trigger hidden if hide is prevented', () => {
-      return new Promise((resolve, reject) => {
-        fixtureEl.innerHTML = [
-          '<div class="toast" data-bs-delay="1" data-bs-animation="false">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '  </div>',
-          '</div>'
-        ].join('')
-
-        const toastEl = fixtureEl.querySelector('.toast')
-        const toast = new Toast(toastEl)
-
-        const assertDone = () => {
-          setTimeout(() => {
-            expect(toastEl).toHaveClass('show')
-            resolve()
-          }, 20)
-        }
-
-        toastEl.addEventListener('shown.bs.toast', () => {
-          toast.hide()
-        })
-
-        toastEl.addEventListener('hide.bs.toast', event => {
-          event.preventDefault()
-          assertDone()
-        })
-
-        toastEl.addEventListener('hidden.bs.toast', () => {
-          reject(new Error('hidden event should not be triggered if hide is prevented'))
-        })
-
-        toast.show()
-      })
+      expect(toastEl).toHaveClass('show')
     })
   })
 
-  describe('dispose', () => {
-    it('should allow to destroy toast', () => {
-      fixtureEl.innerHTML = '<div></div>'
-
-      const toastEl = fixtureEl.querySelector('div')
+  describe('dismiss button', () => {
+    it('should hide toast when dismiss button is clicked', () => {
+      fixtureEl.innerHTML = [
+        '<div class="toast show">',
+        '  <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
+        '  <div class="toast-body">a toast</div>',
+        '</div>'
+      ].join('')
 
-      const toast = new Toast(toastEl)
+      const toastEl = fixtureEl.querySelector('.toast')
+      const dismissBtn = fixtureEl.querySelector('[data-bs-dismiss="toast"]')
 
-      expect(Toast.getInstance(toastEl)).not.toBeNull()
+      expect(toastEl).toHaveClass('show')
 
-      toast.dispose()
+      dismissBtn.click()
 
-      expect(Toast.getInstance(toastEl)).toBeNull()
+      expect(toastEl).not.toHaveClass('show')
     })
 
-    it('should allow to destroy toast and hide it before that', () => {
-      return new Promise(resolve => {
-        fixtureEl.innerHTML = [
-          '<div class="toast" data-bs-delay="0" data-bs-autohide="false">',
-          '  <div class="toast-body">',
-          '    a simple toast',
-          '  </div>',
-          '</div>'
-        ].join('')
+    it('should work with nested dismiss button', () => {
+      fixtureEl.innerHTML = [
+        '<div class="toast show">',
+        '  <div class="toast-header">',
+        '    <strong>Title</strong>',
+        '    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>',
+        '  </div>',
+        '  <div class="toast-body">a toast</div>',
+        '</div>'
+      ].join('')
 
-        const toastEl = fixtureEl.querySelector('div')
-        const toast = new Toast(toastEl)
-        const expected = () => {
-          expect(toastEl).toHaveClass('show')
-          expect(Toast.getInstance(toastEl)).not.toBeNull()
+      const toastEl = fixtureEl.querySelector('.toast')
+      const dismissBtn = fixtureEl.querySelector('[data-bs-dismiss="toast"]')
 
-          toast.dispose()
+      dismissBtn.click()
 
-          expect(Toast.getInstance(toastEl)).toBeNull()
-          expect(toastEl).not.toHaveClass('show')
+      expect(toastEl).not.toHaveClass('show')
+    })
+  })
 
-          resolve()
-        }
+  describe('container with :has()', () => {
+    it('should have correct structure with toast-container', () => {
+      fixtureEl.innerHTML = [
+        '<div class="toast-container">',
+        '  <div class="toast"><div class="toast-body">toast 1</div></div>',
+        '  <div class="toast"><div class="toast-body">toast 2</div></div>',
+        '</div>'
+      ].join('')
 
-        toastEl.addEventListener('shown.bs.toast', () => {
-          setTimeout(expected, 1)
-        })
+      const container = fixtureEl.querySelector('.toast-container')
+      const toasts = fixtureEl.querySelectorAll('.toast')
 
-        toast.show()
-      })
+      expect(container).not.toBeNull()
+      expect(toasts.length).toBe(2)
     })
-  })
 
-  describe('getInstance', () => {
-    it('should return a toast instance', () => {
-      fixtureEl.innerHTML = '<div></div>'
+    it('should support multiple toasts in a container', () => {
+      fixtureEl.innerHTML = [
+        '<div class="toast-container">',
+        '  <div class="toast"><div class="toast-body">toast 1</div></div>',
+        '  <div class="toast"><div class="toast-body">toast 2</div></div>',
+        '  <div class="toast"><div class="toast-body">toast 3</div></div>',
+        '</div>'
+      ].join('')
 
-      const div = fixtureEl.querySelector('div')
-      const toast = new Toast(div)
+      const toasts = fixtureEl.querySelectorAll('.toast')
 
-      expect(Toast.getInstance(div)).toEqual(toast)
-      expect(Toast.getInstance(div)).toBeInstanceOf(Toast)
-    })
+      for (const toastEl of toasts) {
+        new Toast(toastEl).show()
+      }
 
-    it('should return null when there is no toast instance', () => {
-      fixtureEl.innerHTML = '<div></div>'
+      expect(fixtureEl.querySelectorAll('.toast.show').length).toBe(3)
 
-      const div = fixtureEl.querySelector('div')
+      Toast.getInstance(toasts[0]).hide()
 
-      expect(Toast.getInstance(div)).toBeNull()
+      expect(fixtureEl.querySelectorAll('.toast.show').length).toBe(2)
     })
   })
 
-  describe('getOrCreateInstance', () => {
-    it('should return toast instance', () => {
-      fixtureEl.innerHTML = '<div></div>'
+  describe('CSS custom property --bs-toast-delay', () => {
+    it('should accept custom delay via style attribute', () => {
+      fixtureEl.innerHTML = '<div class="toast" style="--bs-toast-delay: 10s"><div class="toast-body">a toast</div></div>'
 
-      const div = fixtureEl.querySelector('div')
-      const toast = new Toast(div)
+      const toastEl = fixtureEl.querySelector('.toast')
+      const computedDelay = toastEl.style.getPropertyValue('--bs-toast-delay')
 
-      expect(Toast.getOrCreateInstance(div)).toEqual(toast)
-      expect(Toast.getInstance(div)).toEqual(Toast.getOrCreateInstance(div, {}))
-      expect(Toast.getOrCreateInstance(div)).toBeInstanceOf(Toast)
+      expect(computedDelay).toBe('10s')
     })
 
-    it('should return new instance when there is no toast instance', () => {
-      fixtureEl.innerHTML = '<div></div>'
+    it('should accept custom delay via setProperty', () => {
+      fixtureEl.innerHTML = '<div class="toast"><div class="toast-body">a toast</div></div>'
 
-      const div = fixtureEl.querySelector('div')
+      const toastEl = fixtureEl.querySelector('.toast')
+      toastEl.style.setProperty('--bs-toast-delay', '3s')
 
-      expect(Toast.getInstance(div)).toBeNull()
-      expect(Toast.getOrCreateInstance(div)).toBeInstanceOf(Toast)
+      expect(toastEl.style.getPropertyValue('--bs-toast-delay')).toBe('3s')
     })
+  })
 
-    it('should return new instance when there is no toast instance with given configuration', () => {
-      fixtureEl.innerHTML = '<div></div>'
+  describe('accessibility', () => {
+    it('should have correct ARIA attributes', () => {
+      fixtureEl.innerHTML = [
+        '<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">',
+        '  <div class="toast-body">a toast</div>',
+        '</div>'
+      ].join('')
 
-      const div = fixtureEl.querySelector('div')
+      const toastEl = fixtureEl.querySelector('.toast')
 
-      expect(Toast.getInstance(div)).toBeNull()
-      const toast = Toast.getOrCreateInstance(div, {
-        delay: 1
-      })
-      expect(toast).toBeInstanceOf(Toast)
+      expect(toastEl.getAttribute('role')).toBe('alert')
+      expect(toastEl.getAttribute('aria-live')).toBe('assertive')
+      expect(toastEl.getAttribute('aria-atomic')).toBe('true')
+    })
+  })
+
+  describe('getOrCreateInstance', () => {
+    it('should return existing instance', () => {
+      fixtureEl.innerHTML = '<div class="toast"><div class="toast-body">a toast</div></div>'
 
-      expect(toast._config.delay).toEqual(1)
+      const toastEl = fixtureEl.querySelector('.toast')
+      const toast = new Toast(toastEl)
+
+      expect(Toast.getOrCreateInstance(toastEl)).toBe(toast)
     })
 
-    it('should return the instance when exists without given configuration', () => {
-      fixtureEl.innerHTML = '<div></div>'
+    it('should create new instance if none exists', () => {
+      fixtureEl.innerHTML = '<div class="toast"><div class="toast-body">a toast</div></div>'
 
-      const div = fixtureEl.querySelector('div')
-      const toast = new Toast(div, {
-        delay: 1
-      })
-      expect(Toast.getInstance(div)).toEqual(toast)
+      const toastEl = fixtureEl.querySelector('.toast')
+      const toast = Toast.getOrCreateInstance(toastEl)
 
-      const toast2 = Toast.getOrCreateInstance(div, {
-        delay: 2
-      })
       expect(toast).toBeInstanceOf(Toast)
-      expect(toast2).toEqual(toast)
-
-      expect(toast2._config.delay).toEqual(1)
     })
   })
 })
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
index e64fd1d880fb..8eb6f2532169 100644
--- a/js/tests/visual/toast.html
+++ b/js/tests/visual/toast.html
@@ -5,13 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="../../../dist/css/bootstrap.min.css" rel="stylesheet">
     <title>Toast</title>
-    <style>
-      .notifications {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-      }
-    </style>
   </head>
   <body>
     <div class="container">
@@ -25,8 +18,8 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
       </div>
     </div>
 
-    <div class="notifications">
-      <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
+    <div class="toast-container position-absolute top-0 end-0 p-3">
+      <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="--bs-toast-delay: 2s">
         <div class="toast-header">
           <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
@@ -37,12 +30,16 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
         </div>
       </div>
 
-      <div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="toast" style="--bs-toast-delay: 99999s" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-header">
           <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
           <small class="text-body-secondary">2 seconds ago</small>
-          <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+          <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="20" height="20" fill="none">
+              <path fill="currentcolor" d="M12 0a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4zm-.646 4.646a.5.5 0 0 0-.707 0L8 7.293 5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.647a.5.5 0 1 0 .708.707L8 8.707l2.647 2.646a.5.5 0 1 0 .707-.707L8.707 8l2.646-2.646a.5.5 0 0 0 0-.708z"/>
+            </svg>
+          </button>
         </div>
         <div class="toast-body">
           Heads up, toasts will stack automatically
@@ -52,18 +49,15 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
     <script src="../../../dist/js/bootstrap.bundle.js"></script>
     <script>
-      /* global bootstrap: false */
+      /* global bootstrap */
+      const { Toast } = bootstrap
 
-      window.addEventListener('load', () => {
-        document.querySelectorAll('.toast').forEach(toastEl => new bootstrap.Toast(toastEl))
-
-        document.getElementById('btnShowToast').addEventListener('click', () => {
-          document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).show())
-        })
+      document.getElementById('btnShowToast').addEventListener('click', () => {
+        document.querySelectorAll('.toast').forEach(toastEl => Toast.getOrCreateInstance(toastEl).show())
+      })
 
-        document.getElementById('btnHideToast').addEventListener('click', () => {
-          document.querySelectorAll('.toast').forEach(toastEl => bootstrap.Toast.getInstance(toastEl).hide())
-        })
+      document.getElementById('btnHideToast').addEventListener('click', () => {
+        document.querySelectorAll('.toast').forEach(toastEl => Toast.getOrCreateInstance(toastEl).hide())
       })
     </script>
   </body>
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 6fcf8df229a7..431b7b5bc163 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -1,6 +1,7 @@
 @use "config" as *;
 @use "variables" as *;
 @use "mixins/border-radius" as *;
+@use "mixins/transition" as *;
 
 // scss-docs-start toast-variables
 $toast-max-width:                   350px !default;
@@ -38,8 +39,11 @@ $toast-header-border-color:         $toast-border-color !default;
     --toast-header-color: #{$toast-header-color};
     --toast-header-bg: #{$toast-header-background-color};
     --toast-header-border-color: #{$toast-header-border-color};
+    --toast-delay: 5s;
     // scss-docs-end toast-css-vars
 
+    // Hidden by default
+    display: none;
     width: var(--toast-max-width);
     max-width: 100%;
     font-size: var(--toast-font-size);
@@ -49,14 +53,49 @@ $toast-header-border-color:         $toast-border-color !default;
     background-clip: padding-box;
     border: var(--toast-border-width) solid var(--toast-border-color);
     box-shadow: var(--toast-box-shadow);
+    opacity: 0%;
+    transform: translateY(1rem);
     @include border-radius(var(--toast-border-radius));
 
-    &.showing {
-      opacity: 0;
+    // Entry/exit transitions
+    @include transition(opacity .3s ease, transform .3s ease, display .3s allow-discrete);
+
+    // Visible state
+    &.show {
+      display: block;
+      opacity: 1;
+      transform: translateY(0);
+
+      // Entry animation starting point
+      @starting-style {
+        opacity: 0;
+        transform: translateY(1rem);
+      }
+
+      // Autohide via CSS animation (fires after --toast-delay)
+      animation: toast-autohide .3s ease var(--toast-delay) forwards;
     }
 
-    &:not(.show) {
+    // Pause autohide on hover or focus
+    &.show:hover,
+    &.show:focus-within {
+      animation-play-state: paused;
+    }
+
+    // Reduced motion: instant autohide (transition handled by mixin)
+    @media (prefers-reduced-motion: reduce) {
+      &.show {
+        animation-duration: .01ms;
+      }
+    }
+  }
+
+  // Autohide keyframes — fades out after the animation-delay
+  @keyframes toast-autohide {
+    to {
       display: none;
+      opacity: 0;
+      transform: translateY(1rem);
     }
   }
 
@@ -69,6 +108,11 @@ $toast-header-border-color:         $toast-border-color !default;
     max-width: 100%;
     pointer-events: none;
 
+    // Auto-hide container when no visible toasts
+    &:not(:has(.toast.show)) {
+      display: none;
+    }
+
     > :not(:last-child) {
       margin-bottom: var(--toast-spacing);
     }
@@ -85,8 +129,7 @@ $toast-header-border-color:         $toast-border-color !default;
     @include border-top-radius(calc(var(--toast-border-radius) - var(--toast-border-width)));
 
     .btn-close {
-      margin-inline-start: var(--toast-padding-x);
-      margin-inline-end: calc(-.5 * var(--toast-padding-x));
+      margin-inline: var(--toast-padding-x) calc(-.5 * var(--toast-padding-x));
     }
   }
 
diff --git a/site/src/assets/partials/snippets.js b/site/src/assets/partials/snippets.js
index 0056131b7b1f..352e50f89a9e 100644
--- a/site/src/assets/partials/snippets.js
+++ b/site/src/assets/partials/snippets.js
@@ -47,25 +47,22 @@ export default () => {
     })
   }
 
-  // Instantiate all toasts in docs pages only
+  // Show all toasts in docs examples (with autohide disabled)
   document.querySelectorAll('.bd-example .toast')
     .forEach(toastNode => {
-      const toast = new bootstrap.Toast(toastNode, {
-        autohide: false
-      })
-
-      toast.show()
+      toastNode.style.setProperty('--bs-toast-delay', '99999s')
+      bootstrap.Toast.getOrCreateInstance(toastNode).show()
     })
 
-  // Instantiate all toasts in docs pages only
+  // Live toast demo
   // js-docs-start live-toast
   const toastTrigger = document.getElementById('liveToastBtn')
   const toastLiveExample = document.getElementById('liveToast')
 
   if (toastTrigger) {
-    const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
+    const toastInstance = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
     toastTrigger.addEventListener('click', () => {
-      toastBootstrap.show()
+      toastInstance.show()
     })
   }
   // js-docs-end live-toast
diff --git a/site/src/content/docs/components/toasts.mdx b/site/src/content/docs/components/toasts.mdx
index 0330eb2073c4..10aa55e0612b 100644
--- a/site/src/content/docs/components/toasts.mdx
+++ b/site/src/content/docs/components/toasts.mdx
@@ -8,10 +8,13 @@ Toasts are lightweight notifications designed to mimic the push notifications th
 
 ## Overview
 
-Things to know when using the toast plugin:
+Things to know when using the toast component:
 
-- Toasts are opt-in for performance reasons, so **you must initialize them yourself**.
-- Toasts will automatically hide if you do not specify `autohide: false`.
+- Toasts use a lightweight `Toast` class that extends `BaseComponent` — show and hide via `Toast.getOrCreateInstance(el).show()` / `.hide()`.
+- Autohide is **CSS-driven** via animation — toasts hide after `5s` by default. Customize with the `--bs-toast-delay` CSS custom property.
+- Dismiss buttons with `data-bs-dismiss="toast"` work automatically via a delegated click handler.
+- Toasts fire custom events (`show.bs.toast`, `shown.bs.toast`, `hide.bs.toast`, `hidden.bs.toast`) that can be prevented.
+- Toasts pause their autohide timer on hover and focus-within.
 
 <Callout name="info-prefersreducedmotion" />
 
@@ -35,10 +38,6 @@ Toasts are as flexible as you need and have very little required markup. At a mi
     </div>
   </div>`} />
 
-<Callout type="warning">
-Previously, our scripts dynamically added the `.hide` class to completely hide a toast (with `display:none`, rather than just with `opacity:0`). This is now not necessary anymore. However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.
-</Callout>
-
 ### Live example
 
 Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.
@@ -81,7 +80,17 @@ Click the button below to show a toast (positioned with our utilities in the low
 
 We use the following JavaScript to trigger our live toast demo:
 
-<JsDocs name="live-toast" file="site/src/assets/partials/snippets.js" />
+```js
+const toastTrigger = document.getElementById('liveToastBtn')
+const toastLiveExample = document.getElementById('liveToast')
+
+if (toastTrigger) {
+  const toastInstance = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
+  toastTrigger.addEventListener('click', () => {
+    toastInstance.show()
+  })
+}
+```
 
 ### Translucent
 
@@ -167,6 +176,166 @@ Building on the above example, you can create different toast color schemes with
     </div>
   </div>`} />
 
+### Status toasts
+
+Combine [color utilities]([[docsref:/utilities/colors]]) with inline SVG icons for clear success, error, and warning feedback. Use `text-bg-*` with `border-0` for bold, full-color toasts.
+
+<Example code={`<div class="toast-container position-static">
+    <div class="toast align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="d-flex">
+        <div class="toast-body d-flex align-items-center">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="flex-shrink-0 me-2" viewBox="0 0 16 16">
+            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+          </svg>
+          Changes saved.
+        </div>
+        <CloseButton dismiss="toast" class="me-2 m-auto" />
+      </div>
+    </div>
+
+    <div class="toast align-items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="d-flex">
+        <div class="toast-body d-flex align-items-center">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="flex-shrink-0 me-2" viewBox="0 0 16 16">
+            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+          </svg>
+          Could not complete the request.
+        </div>
+        <CloseButton dismiss="toast" class="me-2 m-auto" />
+      </div>
+    </div>
+
+    <div class="toast align-items-center text-bg-warning border-0" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="d-flex">
+        <div class="toast-body d-flex align-items-center">
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="flex-shrink-0 me-2" viewBox="0 0 16 16">
+            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
+          </svg>
+          Your session expires in 5 minutes.
+        </div>
+        <CloseButton dismiss="toast" class="me-2 m-auto" />
+      </div>
+    </div>
+  </div>`} />
+
+### With icon badges
+
+For a subtler look, pair a neutral toast background with small colored icon circles. The badge draws the eye to the status without overwhelming the message.
+
+<Example code={`<div class="toast-container position-static">
+    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="toast-body d-flex align-items-center">
+        <div class="avatar avatar-sm bg-success text-white flex-shrink-0 me-2">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/>
+          </svg>
+        </div>
+        <div class="flex-grow-1">Profile updated.</div>
+        <CloseButton dismiss="toast" class="ms-2" />
+      </div>
+    </div>
+
+    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="toast-body d-flex align-items-center">
+        <div class="avatar avatar-sm bg-danger text-white flex-shrink-0 me-2">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+          </svg>
+        </div>
+        <div class="flex-grow-1">Upload failed. Please try again.</div>
+        <CloseButton dismiss="toast" class="ms-2" />
+      </div>
+    </div>
+
+    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+      <div class="toast-body d-flex align-items-center">
+        <div class="avatar avatar-sm bg-warning flex-shrink-0 me-2">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z"/>
+          </svg>
+        </div>
+        <div class="flex-grow-1">Storage almost full.</div>
+        <CloseButton dismiss="toast" class="ms-2" />
+      </div>
+    </div>
+  </div>`} />
+
+### Undo action
+
+Include an undo link next to the dismiss button so users can reverse recent actions.
+
+<Example code={`<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="d-flex">
+      <div class="toast-body">
+        Message moved to trash.
+      </div>
+      <a href="#" class="link-primary fw-semibold text-decoration-none m-auto">Undo</a>
+      <CloseButton dismiss="toast" class="me-2 m-auto" />
+    </div>
+  </div>`} />
+
+### Call to action
+
+Pair an icon badge with a heading, description, and action buttons for prompts that need user interaction.
+
+<Example code={`<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-body">
+      <div class="d-flex align-items-center mb-2">
+        <div class="avatar avatar-sm bg-primary-subtle text-primary flex-shrink-0 me-2">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+            <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/>
+            <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/>
+          </svg>
+        </div>
+        <strong>New version available</strong>
+      </div>
+      <small class="text-body-secondary">v6.0.1 includes performance improvements and bug fixes.</small>
+      <div class="mt-2 pt-2 border-top">
+        <button type="button" class="btn btn-primary btn-sm">Restart now</button>
+        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Later</button>
+      </div>
+    </div>
+  </div>`} />
+
+### With illustration
+
+Use a placeholder image alongside a call-to-action for onboarding or promotional toasts.
+
+<Example code={`<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-body d-flex gap-3 align-items-start">
+      <Placeholder width="80" height="80" class="rounded flex-shrink-0" background="#6f42c1" text={false} />
+      <div>
+        <strong class="d-block mb-1">Complete your profile</strong>
+        <small class="text-body-secondary">Add a photo and bio so teammates can recognize you.</small>
+        <div class="mt-2">
+          <button type="button" class="btn btn-primary btn-sm">Set up</button>
+          <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Skip</button>
+        </div>
+      </div>
+    </div>
+  </div>`} />
+
+### With progress bar
+
+Show task progress inside a toast using Bootstrap's [progress component]([[docsref:/components/progress]]).
+
+<Example code={`<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast-header">
+      <strong class="me-auto">Importing data...</strong>
+      <small class="text-body-secondary">Step 3 of 4</small>
+      <CloseButton dismiss="toast" />
+    </div>
+    <div class="toast-body">
+      <div class="d-flex justify-content-between mb-1">
+        <small>customers-2024.csv</small>
+        <small class="text-body-secondary">75%</small>
+      </div>
+      <div class="progress" role="progressbar" aria-label="Import progress" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="height: 6px;">
+        <div class="progress-bar" style="width: 75%"></div>
+      </div>
+    </div>
+  </div>`} />
+
 ## Placement
 
 Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you’re only ever going to show one toast at a time, put the positioning styles right on the `.toast`.
@@ -266,17 +435,17 @@ Note that the live region needs to be present in the markup *before* the toast i
 
 You also need to adapt the `role` and `aria-live` level depending on the content. If it’s an important message like an error, use `role="alert" aria-live="assertive"`, otherwise use `role="status" aria-live="polite"` attributes.
 
-As the content you’re displaying changes, be sure to update the [`delay` timeout](#options) so that users have enough time to read the toast.
+As the content you're displaying changes, be sure to update the [`--bs-toast-delay`](#variables) value so that users have enough time to read the toast.
 
 ```html
-<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
+<div class="toast" role="alert" aria-live="polite" aria-atomic="true" style="--bs-toast-delay: 10s">
   <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
 </div>
 ```
 
-When using `autohide: false`, you must add a close button to allow users to dismiss the toast.
+When disabling autohide, you must add a close button to allow users to dismiss the toast.
 
-<Example code={`<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
+<Example code={`<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" style="--bs-toast-delay: 99999s">
     <div class="toast-header">
       <Placeholder width="20" height="20" background="#007aff" class="rounded me-2" text={false} title={false} />
       <strong class="me-auto">Bootstrap</strong>
@@ -288,7 +457,7 @@ When using `autohide: false`, you must add a close button to allow users to dism
     </div>
   </div>`} />
 
-While technically it’s possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long [`delay` timeout](#options), keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don’t receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with `autohide: false`.
+While technically it's possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts. Even if you give the toast a long `--bs-toast-delay`, keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don't receive focus when they are displayed). If you absolutely must have further controls, we recommend using a toast with a very long `--bs-toast-delay`.
 
 ## CSS
 
@@ -304,58 +473,66 @@ While technically it’s possible to add focusable/actionable controls (such as
 
 ## Usage
 
-Initialize toasts via JavaScript:
+Show and hide toasts via the `Toast` class, which provides instance methods and custom events.
+
+### Show and hide
 
 ```js
-const toastElList = document.querySelectorAll('.toast')
-const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))
+const myToastEl = document.getElementById('myToast')
+const toast = bootstrap.Toast.getOrCreateInstance(myToastEl)
+
+// Show a toast
+toast.show()
+
+// Hide a toast
+toast.hide()
 ```
 
-### Triggers
+### Autohide delay
 
-<JsDismiss name="toast" />
+Toasts automatically hide after `5s` by default. Customize the delay with the `--bs-toast-delay` CSS custom property:
 
-### Options
+```html
+<!-- Custom 10-second delay -->
+<div class="toast" style="--bs-toast-delay: 10s">...</div>
 
-<JsDataAttributes />
+<!-- Effectively disable autohide -->
+<div class="toast" style="--bs-toast-delay: 99999s">...</div>
+```
 
-<BsTable>
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `animation` | boolean | `true` | Apply a CSS fade transition to the toast. |
-| `autohide` | boolean | `true` | Automatically hide the toast after the delay. |
-| `delay` | number | `5000` | Delay in milliseconds before hiding the toast. |
-</BsTable>
+You can also set the delay programmatically:
 
-### Methods
+```js
+document.getElementById('myToast').style.setProperty('--bs-toast-delay', '10s')
+```
 
-<Callout name="danger-async-methods" type="danger" />
+### Dismiss
 
-<BsTable>
-| Method | Description |
-| --- | --- |
-| `dispose` | Hides an element’s toast. Your toast will remain on the DOM but won’t show anymore. |
-| `getInstance` | *Static* method which allows you to get the toast instance associated with a DOM element. <br/> For example: `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)` Returns a Bootstrap toast instance. |
-| `getOrCreateInstance` | *Static* method which allows you to get the toast instance associated with a DOM element, or create a new one, in case it wasn’t initialized. <br/>`const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` Returns a Bootstrap toast instance. |
-| `hide` | Hides an element’s toast. **Returns to the caller before the toast has actually been hidden** (i.e. before the `hidden.bs.toast` event occurs). You have to manually call this method if you made `autohide` to `false`. |
-| `isShown` | Returns a boolean according to toast’s visibility state. |
-| `show` | Reveals an element’s toast. **Returns to the caller before the toast has actually been shown** (i.e. before the `shown.bs.toast` event occurs). You have to manually call this method, instead your toast won’t show. |
-</BsTable>
+Dismissal is handled automatically via a delegated click handler. Add `data-bs-dismiss="toast"` to a button **within the toast**:
+
+```html
+<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
+```
+
+### Pause on interaction
+
+Toasts pause their autohide countdown when hovered or when they contain a focused element (`:focus-within`). This is handled entirely via CSS `animation-play-state`.
 
 ### Events
 
 <BsTable>
 | Event | Description |
 | --- | --- |
-| `hide.bs.toast` | This event is fired immediately when the `hide` instance method has been called. |
-| `hidden.bs.toast` | This event is fired when the toast has finished being hidden from the user. |
-| `show.bs.toast` | This event fires immediately when the `show` instance method is called. |
-| `shown.bs.toast` | This event is fired when the toast has been made visible to the user. |
+| `show.bs.toast` | Fires immediately when the `show` instance method is called. |
+| `shown.bs.toast` | Fired when the toast has been made visible. |
+| `hide.bs.toast` | Fires immediately when the `hide` instance method is called. |
+| `hidden.bs.toast` | Fired when the toast has been hidden. |
 </BsTable>
 
 ```js
 const myToastEl = document.getElementById('myToast')
+
 myToastEl.addEventListener('hidden.bs.toast', () => {
-  // do something...
+  // do something when the toast is hidden
 })
 ```