Notification

Use notifications (also called toasts) to show brief, temporary messages about the result of an action.

Success Notification

Your changes have been saved

<div class="notification notification-success" role="status">
  <div class="notification-icon">✓</div>
  <div class="notification-content">
    <p class="notification-message">Your changes have been saved</p>
  </div>
  <button class="notification-close" aria-label="Dismiss">×</button>
</div>

Error Notification

Failed to save changes. Please try again.

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

Warning Notification

Your session will expire in 5 minutes

Info Notification

A new version is available

With Action

Document deleted

Undo

JavaScript Implementation

class NotificationManager {
  constructor() {
    this.container = this.createContainer();
  }

  createContainer() {
    const container = document.createElement('div');
    container.className = 'notification-container';
    container.setAttribute('aria-live', 'polite');
    document.body.appendChild(container);
    return container;
  }

  show(message, type = 'info', duration = 5000) {
    const notification = document.createElement('div');
    notification.className = `notification notification-${type}`;
    notification.setAttribute('role', type === 'error' ? 'alert' : 'status');
    notification.innerHTML = `
      <div class="notification-content">
        <p class="notification-message">${message}</p>
      </div>
      <button class="notification-close" aria-label="Dismiss">×</button>
    `;

    const closeBtn = notification.querySelector('.notification-close');
    closeBtn.addEventListener('click', () => this.dismiss(notification));

    this.container.appendChild(notification);

    if (duration > 0) {
      setTimeout(() => this.dismiss(notification), duration);
    }

    return notification;
  }

  dismiss(notification) {
    notification.classList.add('notification-leaving');
    setTimeout(() => notification.remove(), 300);
  }

  success(message) { return this.show(message, 'success'); }
  error(message) { return this.show(message, 'error', 0); }
  warning(message) { return this.show(message, 'warning'); }
  info(message) { return this.show(message, 'info'); }
}

// Usage
const notifications = new NotificationManager();
notifications.success('Changes saved');
notifications.error('Something went wrong');

When to Use

Use notifications for:

• Confirming successful actions
• Non-critical errors that don't block the user
• Warnings about upcoming events
• Status updates

Don't use notifications for:

• Critical errors that require immediate action
• Form validation errors (use inline errors)
• Important information users must see
• Marketing or promotional messages

Accessibility

• Use role="status" for non-urgent messages
• Use role="alert" for errors and urgent messages
• Provide a dismiss button
• Don't auto-dismiss error messages
• Ensure sufficient display time (5 seconds minimum)

CSS Classes

.notification { }
.notification-success { }
.notification-error { }
.notification-warning { }
.notification-info { }
.notification-icon { }
.notification-content { }
.notification-message { }
.notification-action { }
.notification-close { }
.notification-container { }