Toasts

Transient notifications for brief messages and alerts. Toasts slide in from the top of the viewport and auto-dismiss after a timeout. Use the programmatic API for dynamic messages, or initServerToasts() to animate server-rendered messages.

Programmatic API

// success toast (auto-dismisses in 4s)
McGowanStyle.toast.successToast('Saved successfully');

// custom toast with type and timeout
McGowanStyle.toast.createToast({ message: 'Processing...', timeout: 6000, type: 'warning' });

// persistent toast (no timeout)
const id = McGowanStyle.toast.createToast({ message: 'Long-running task...', timeout: 0 });

// dismiss specific toast
McGowanStyle.toast.dismissToast(id);

// clear all
McGowanStyle.toast.clearAllToasts();

Server-rendered toasts (Django / SSR)

When a server framework (e.g. Django) renders flash messages as .ms-toast elements inside a .ms-toast__container div, call initServerToasts() on page load to register them with the auto-dismiss system.

<div class="ms-toast__container">
  <div class="ms-toast ms-toast--success" role="status">
    <span class="ms-toast__body">Your message has been sent.</span>
  </div>
</div>

// Call after DOM is ready — registers all pre-rendered toasts for auto-dismiss
// Default timeout: 5000ms. Pass a custom value as first argument.
document.addEventListener('DOMContentLoaded', () => {
  McGowanStyle.toast.initServerToasts(5000);
});

{% if messages %}
<div class="ms-toast__container">
  {% for message in messages %}
  <div class="ms-toast ms-toast--{{ message.tags|default:'info' }}" role="status" aria-live="polite">
    <span class="ms-toast__body">{{ message }}</span>
  </div>
  {% endfor %}
</div>
{% endif %}