Documentation

Toasts

Beta

Toast positions, icon/image behavior, auto-close defaults, and the rules that keep floating notifications out of the banner rail.

Positions

Snippettext

Toast positions:
- TOP_LEFT / TOP_RIGHT / BOTTOM_LEFT / BOTTOM_RIGHT: corner overlays
- TOP_FIXED / BOTTOM_FIXED: centered fixed rails

Corner toasts are the standard notification pattern. The centered fixed rail variants behave more like temporary announcement bars and share arbitration rules with fixed banners.

Default template and tokens

Default toast HTMLhtml

<!-- Supported toast tokens: {{headline}}, {{body}}, {{imageUrl}}, {{imageAlt}}, {{cta.label}}, {{cta.href}} -->
<div class="spry-message spry-toast">
  <div class="spry-toast__icon" aria-hidden="true">
    <img class="spry-toast__icon-image" src="{{imageUrl}}" alt="{{imageAlt}}" />
    <span class="spry-toast__icon-fallback bi bi-bell-fill"></span>
  </div>
  <div class="spry-toast__content">
    <div class="spry-toast__headline">{{headline}}</div>
    <div class="spry-toast__body">{{body}}</div>
    <a class="spry-toast__cta" href="{{cta.href}}">{{cta.label}}</a>
  </div>
</div>

The default toast supports headline, body HTML, CTA label/href, and an optional image-driven icon slot. If {{imageUrl}} is empty, the fallback bell icon stays visible, so the message still has a predictable default state.

Runtime behavior

Snippettext

Toast delivery defaults:
- autoCloseMs defaults to 5000 when multiple toasts share the stack
- a single toast stays open until dismissed
- autoCloseMs: 0 disables auto-close
- hover pauses the active auto-close timer
- corner toasts are offset away from visible top/bottom banner rails

Fixed banners suppress centered fixed toast rails in the same top or bottom slot.
Corner toasts are ordered deterministically by priority and message id.
Toast layout settings such as width, max width, padding, radius, text alignment, border styling, and shadow are applied at runtime through scoped override CSS.