Toast

Toast notifications for temporary messages.

Viewport

Wrap toasts in af-toast-viewport so several in the same corner stack. The viewport is position: fixed on the window. Inside af-relative or af-pos-relative it becomes absolute and pins to that box.

Saved. Your changes are live.

Sync complete.

<div class="af-toast-viewport">
  <div class="af-toast af-is-success" role="status">
    <strong>Saved.</strong>
    Your changes are live.
  </div>
  <div class="af-toast af-is-info" role="status">Sync complete.</div>
</div>

The preview is a relative box so the stack stays inside the example. Omit af-relative in an app to pin to the window.

Lone toast

A single af-toast without a viewport stays position: fixed in the bottom-end corner of the window. Prefer the viewport once you have more than one.

<div class="af-toast af-is-success" role="status">
  <strong>Success!</strong>
  Your changes have been saved.
</div>

Accessibility

• Status / success / info toasts: role="status" (polite live region)
• Errors / urgent toasts: role="alert" (assertive live region)
• Prefer role="status" by default — role="alert" interrupts screen readers and should be reserved for failures that need immediate attention
• Decorative icons should be aria-hidden="true"
• CSS styles the toast only; announcement behavior comes from the live-region role when the toast is inserted into the DOM