Notification

All Variants

<!-- Info — role="status" for polite announcement -->
<div class="alert info" role="status">
  <span class="axicon render" data-name="Info"></span>
  <div>
    <strong>New features available</strong>
    <p>Version 2.0 has been released.</p>
  </div>
  <button aria-label="Dismiss">
    <span class="axicon render" data-name="X"></span>
  </button>
</div>

<!-- Success -->
<div class="alert success" role="status">...</div>

<!-- Warning — role="alert" for immediate announcement -->
<div class="alert warning" role="alert">...</div>

<!-- Error -->
<div class="alert error" role="alert">...</div>

Triggered Toast Notifications

Click the buttons to trigger live notifications in the corner:

function showToast(type, title, message) {
  const toast = document.createElement('div');
  toast.className = `alert ${type}`;
  toast.setAttribute('role', type === 'error' || type === 'warning' ? 'alert' : 'status');
  toast.innerHTML = `
    <div>
      <strong>${title}</strong>
      <p>${message}</p>
    </div>
    <button aria-label="Dismiss"
            data-remove-closest=".alert">✕</button>
  `;
  document.getElementById('toast-region').appendChild(toast);
  // Auto-dismiss after 5s
  setTimeout(() => toast.remove(), 5000);
}

Text-Only (No Icon)

<!-- Minimal — no icon, just message -->
<div class="alert success" role="status">
  <p>Your password has been changed.</p>
</div>

Variants Reference

Dismiss Behaviour

The dismiss button uses data-remove-closest=".alert" — no library needed. For animated dismiss:

// Animated dismiss
document.addEventListener('click', e => {
  const closeBtn = e.target.closest('.alert .close');
  if (!closeBtn) return;
  const alert = closeBtn.closest('.alert');
  alert.style.opacity = '0';
  alert.style.transform = 'translateX(100%)';
  alert.style.transition = 'all 0.3s ease';
  setTimeout(() => alert.remove(), 300);
});

Accessibility

• Use role="alert" for errors and warnings — announced immediately by screen readers
• Use role="status" for success and info — announced politely without interrupting
• Never rely on colour alone — always include an icon and text
• The dismiss button needs aria-label="Dismiss" — the × icon alone is not accessible
• For dynamically injected toasts, inject into a container with aria-live="polite"