Toast

Toast notifications for temporary messages.

Markup

<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

Live example

(Look in the corners of the screen!)

Success! Your changes have been saved.