SuperToaster

Toast notification system with intelligent stacking, positioning, and auto-dismiss. Trigger notifications from HTML or JavaScript events via data-* attributes.

Stacking Auto-dismiss Actions Accessible

View Full Documentation

What Makes It Super

Smart Stacking

Toasts stack intelligently with configurable limits. Older toasts collapse or are replaced when limit is reached.

<div data-az-component="super-toaster"
     data-az-stack-limit="5"
     data-az-stack-behavior="collapse"
     data-az-stack-gap="12">

Flexible Positioning

Position toasts in any corner or edge. Different positions for different toast types.

<div data-az-position="top-right"
     data-az-position-error="top-center"
     data-az-offset-x="24"
     data-az-offset-y="24">

Auto-dismiss Control

Configurable dismiss timers per toast type. Pause on hover, progress bar indicators, and manual dismiss.

<div data-az-auto-dismiss="5000"
     data-az-dismiss-error="false"
     data-az-pause-on-hover="true"
     data-az-progress-bar="true">

Action Buttons

Add action buttons to toasts. Undo operations, view details, or retry failed actions.

<button 
  data-az-toast-trigger
  data-az-toast-message="Item deleted"
  data-az-toast-action="Undo"
  data-az-toast-action-url="/api/undo">

HTMX Response Handling

Automatically show toasts from HTMX response headers. No JavaScript required to display server messages.

# Server response header
HX-Trigger: {"showToast": {
  "type": "success",
  "message": "User saved successfully"
}}

Screen Reader Support

Full ARIA live region support. Announcements are made appropriately based on toast urgency.

<div data-az-aria-live="polite"
     data-az-aria-live-error="assertive"
     role="status">

Complete Example

A toast notification system with multiple trigger patterns.

<!-- Toaster Container -->
<div 
  data-az-component="super-toaster"
  data-az-position="top-right"
  data-az-stack-limit="5"
  data-az-auto-dismiss="5000"
  data-az-pause-on-hover="true"
  data-az-progress-bar="true">
</div>

<!-- Trigger from Button -->
<button 
  data-az-toast-trigger
  data-az-toast-type="success"
  data-az-toast-message="Settings saved!">
  Save Settings
</button>

<!-- Trigger with Action -->
<button 
  data-az-toast-trigger
  data-az-toast-type="warning"
  data-az-toast-message="User will be deleted"
  data-az-toast-action="Undo"
  data-az-toast-action-callback="undoDelete">
  Delete User
</button>

<!-- HTMX Form with Toast Response -->
<form hx-post="/api/users"
      hx-target="#result">
  <!-- Server responds with HX-Trigger header -->
</form>

Ready for Better Notifications?

SuperToaster is part of AZ UI Kit. Request a briefing to learn more about our enterprise licensing.

SOLICITAR BRIEFING Back to AZ UI Kit