##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Alerts

Alerts are versatile UI components designed to deliver important feedback, notifications, and status messages to users. They provide contextual visual cues through color, icons, and content structure to effectively communicate different types of information. Well-designed alerts help guide users, prevent errors, and enhance the overall user experience by providing timely and relevant information.

### 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

Contextual Alert Examples
Loading...
Contextual Alert Examples
Loading...

### 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.

Alerts with Interactive Links
Loading...
Alerts with Interactive Links
Loading...

### 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.

Rich Content Alert Example
Loading...
Rich Content Alert Example
Loading...

### 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.

Dismissible Alert Examples
Loading...
Dismissible Alert Examples
Loading...

### 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.

Live Alert Example
Loading...
Live Alert Example
Loading...

### 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.

Custom Styled Alert Examples
Loading...
Custom Styled Alert Examples
Loading...

### 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.

Notification Style Alerts
Loading...
Notification Style Alerts
Loading...

### 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.

Progress & Status Alerts
Loading...
Progress & Status Alerts
Loading...

### 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.

System & Admin Alerts
Loading...
System & Admin Alerts
Loading...

### Developer Tips & Best Practices

#### Pro Tips for Alerts

- Accessibility: Always include proper ARIA attributes and ensure sufficient color contrast
- Performance: Use event delegation for dynamically created alerts to avoid memory leaks
- UX: Provide clear, actionable messages and avoid technical jargon in user-facing alerts
- Timing: Auto-dismiss informational alerts but let users manually close error/warning alerts
- Positioning: Consider using toast notifications for non-blocking alerts
- Icons: Use consistent iconography to help users quickly identify alert types

#### Common Pitfalls to Avoid

- Don't show too many alerts simultaneously - it overwhelms users
- Avoid using alerts for non-essential information that doesn't require immediate attention
- Don't auto-dismiss critical error alerts - users need time to read and act on them
- Never use alerts as the primary method for important feature announcements
- Don't forget to handle keyboard navigation for dismissible alerts
- Avoid nested alerts or alerts within modals unless absolutely necessary

#### JavaScript Integration Example

Here's a reusable alert manager class for your projects:

    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));
      }
    }

`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates