Alerts

Contextual Alerts

Choose from eight contextual alert styles to convey different message types. Each style provides distinct visual cues through color and icons, helping users quickly understand the nature and importance of the message. Use alert-primary, alert-success, etc. classes to apply different styles based on the message context:

• Primary/Secondary: General information and system messages
• Success: Confirmation of completed actions or positive outcomes
• Danger: Critical errors, failures, or actions requiring immediate attention
• Warning: Potential issues or actions requiring caution
• Info: Helpful information, tips, or announcements
• Light/Dark: Subtle notifications or high-contrast messages

Interactive Alerts

Enhance alerts with interactive elements using the .alert-link class. This maintains consistent styling while providing clear call-to-action opportunities within your alerts. Links automatically inherit the alert's color scheme for seamless integration, creating a cohesive visual experience while enabling users to take immediate action based on the notification.

Rich Content Alerts

Create more engaging and informative alerts by incorporating rich content such as headings, lists, badges, and icons. These elements help structure information hierarchically and highlight key details within the alert context. Rich content alerts are particularly useful for complex notifications that require more explanation or contain multiple pieces of related information.

Dismissible Alerts

Add the alert-dismissible class and dismiss button to create closeable alerts. These are perfect for temporary notifications that users can acknowledge and remove when no longer needed. Include the fade and show classes for smooth transition effects. Dismissible alerts give users control over their interface while ensuring important messages are seen.

Live Alert Example

Create dynamic alerts that respond to user interactions using JavaScript. This example demonstrates how to show an alert (hidden initially) when a button is clicked, then dismiss it with the built-in close button. This pattern is useful for providing feedback after user actions without requiring a page refresh.

Custom Styled Alerts

Create visually distinctive alerts by combining utility classes with the base alert component. This example demonstrates alerts with left borders, custom icon containers, and enhanced visual hierarchy. Custom styling can help establish different levels of importance or categorize alerts within your interface while maintaining accessibility and usability.

Notification Style Alerts

Create notification-style alerts that mimic modern app notifications. These alerts are perfect for status updates, system messages, and user-to-user communications. They feature profile images, timestamps, and action buttons for enhanced user interaction.

Progress & Status Alerts

Combine alerts with progress indicators and status badges to show ongoing processes, completion states, and multi-step workflows. These alerts are ideal for file uploads, data processing, and task management interfaces.

System & Admin Alerts

Professional alerts designed for admin interfaces and system monitoring. These include server status updates, maintenance notifications, performance warnings, and security alerts with technical details and action buttons.

Developer Tips & Best Practices

class AlertManager {
  constructor(containerId = 'alertContainer') {
    this.container = document.getElementById(containerId) || document.body;
    this.alertQueue = [];
    this.maxAlerts = 3;
  }

  show(message, type = 'info', options = {}) {
    const alertConfig = {
      id: 'alert-' + Date.now(),
      message,
      type,
      icon: options.icon || this.getDefaultIcon(type),
      dismissible: options.dismissible !== false,
      autoClose: options.autoClose !== false,
      duration: options.duration || 5000
    };

    if (this.alertQueue.length >= this.maxAlerts) {
      this.dismissOldest();
    }

    this.createAlert(alertConfig);
    this.alertQueue.push(alertConfig);
  }

  getDefaultIcon(type) {
    const icons = {
      success: 'ri-check-line',
      danger: 'ri-error-warning-line',
      warning: 'ri-alarm-warning-line',
      info: 'ri-information-line',
      primary: 'ri-notification-3-line'
    };
    return icons[type] || 'ri-information-line';
  }

  createAlert(config) {
    const wrapper = document.createElement('div');
    wrapper.innerHTML = `
      <div id="${config.id}" class="alert alert-${config.type} alert-dismissible fade show" role="alert">
        <div class="d-flex align-items-center">
          <i class="${config.icon} me-2"></i>
          <span>${config.message}</span>
        </div>
        ${config.dismissible ? '<button type="button" class="btn-close" data-bs-dismiss="alert"></button>' : ''}
      </div>
    `;

    this.container.appendChild(wrapper);

    if (config.autoClose) {
      setTimeout(() => this.dismiss(config.id), config.duration);
    }
  }

  dismiss(alertId) {
    const alertElement = document.getElementById(alertId);
    if (alertElement) {
      new bootstrap.Alert(alertElement).close();
      this.alertQueue = this.alertQueue.filter(alert => alert.id !== alertId);
    }
  }

  dismissAll() {
    this.alertQueue.forEach(alert => this.dismiss(alert.id));
  }
}