Bulma Notification

Bulma Notifications are versatile alert blocks that can be used to highlight important information, success messages, warnings, or errors. They can be dismissed by the user.

Basic Notification

Simple notification with text content:

<div class="notification">
  This is a basic notification.
</div>

Colored Notifications

Use color modifiers for different message types:

<!-- Primary -->
<div class="notification is-primary">
  Primary notification
</div>

<!-- Success -->
<div class="notification is-success">
  Success notification
</div>

<!-- Warning -->
<div class="notification is-warning">
  Warning notification
</div>

<!-- Error -->
<div class="notification is-danger">
  Error notification
</div>

<!-- Info -->
<div class="notification is-info">
  Info notification
</div>

<!-- Light/Dark -->
<div class="notification is-light">
<div class="notification is-dark">

Notification with Delete Button

Add a delete button to make notifications dismissible:

<div class="notification is-success">
  <button class="delete"></button>
  Your changes have been saved successfully!
</div>

Notification Content

Add titles and structured content:

<div class="notification is-info">
  <button class="delete"></button>
  <div class="content">
    <h4 class="title is-4">Update Available</h4>
    <p>A new version of the application is ready to download.</p>
    <p class="is-size-7">Published: January 15, 2024</p>
  </div>
</div>

Notification with Icons

<div class="notification is-warning">
  <button class="delete"></button>
  <div class="media">
    <div class="media-left">
      <span class="icon is-large">
        <i class="fas fa-2x fa-exclamation-triangle"></i>
      </span>
    </div>
    <div class="media-content">
      <h4 class="title is-4">Maintenance Alert</h4>
      <p>The system will be undergoing maintenance on Sunday from 2 AM to 4 AM.</p>
    </div>
  </div>
</div>

Notification with Actions

<div class="notification is-primary">
  <button class="delete"></button>
  <p>Cookies help us deliver our services. By using our services, you agree to our use of cookies.</p>
  <div class="buttons is-right mt-3">
    <button class="button is-light">Learn More</button>
    <button class="button is-primary is-inverted">Accept</button>
  </div>
</div>

Notification Positions

Position notifications using helper classes:

<!-- Fixed position (for toast notifications) -->
<div class="notification is-success is-fixed-top">
  Saved successfully!
</div>

<!-- With custom positioning -->
<div class="notification is-warning" style="position: fixed; top: 20px; right: 20px; z-index: 1000;">
  This is a toast notification
</div>

Notification Sizes

<!-- Small notification -->
<div class="notification is-small is-info">
  Small info notification
</div>

<!-- Large notification -->
<div class="notification is-large is-success">
  <h3 class="title is-3">Congratulations!</h3>
  <p>Your account has been successfully created.</p>
</div>

JavaScript Integration

Handle delete button clicks:

// Add event listeners for delete buttons
document.addEventListener('DOMContentLoaded', () => {
  (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
    const $notification = $delete.parentNode;
    
    $delete.addEventListener('click', () => {
      $notification.parentNode.removeChild($notification);
    });
  });
});

// Or with animation
$delete.addEventListener('click', () => {
  $notification.classList.add('fade-out');
  setTimeout(() => {
    $notification.parentNode.removeChild($notification);
  }, 300);
});

Practical Examples

Form Validation Notifications

<!-- Success message -->
<div class="notification is-success">
  <button class="delete"></button>
  <strong>Success!</strong> Your profile has been updated.
</div>

<!-- Error message -->
<div class="notification is-danger">
  <button class="delete"></button>
  <strong>Error!</strong> Please correct the following:
  <ul>
    <li>Email address is required</li>
    <li>Password must be at least 8 characters</li>
  </ul>
</div>

<!-- Warning message -->
<div class="notification is-warning">
  <button class="delete"></button>
  <strong>Warning:</strong> Your subscription expires in 3 days.
</div>

System Status Notifications

<div class="notification is-info">
  <div class="columns is-vcentered">
    <div class="column is-narrow">
      <span class="icon is-large">
        <i class="fas fa-2x fa-server"></i>
      </span>
    </div>
    <div class="column">
      <h4 class="title is-4">System Status: Operational</h4>
      <p>All systems are running normally. Last updated: Just now</p>
    </div>
    <div class="column is-narrow">
      <button class="button is-info is-outlined">View Details</button>
    </div>
  </div>
</div>

Cookie Consent Banner

<div class="notification is-dark is-fixed-bottom" style="border-radius: 0;">
  <div class="columns is-vcentered">
    <div class="column">
      <p class="mb-0">
        We use cookies to enhance your experience. By continuing to visit this site 
        you agree to our use of cookies.
        <a href="/privacy">Learn more</a>
      </p>
    </div>
    <div class="column is-narrow">
      <div class="buttons">
        <button class="button is-light">Decline</button>
        <button class="button is-primary">Accept All</button>
      </div>
    </div>
  </div>
</div>

Toast Notification System

<div id="toast-container" style="position: fixed; top: 20px; right: 20px; z-index: 9999;">
  <!-- Toasts will be inserted here -->
</div>

<script>
function showToast(message, type = 'info', duration = 5000) {
  const toast = document.createElement('div');
  toast.className = `notification ${type === 'success' ? 'is-success' : 
                        type === 'error' ? 'is-danger' : 
                        type === 'warning' ? 'is-warning' : 'is-info'}`;
  toast.style.marginBottom = '10px';
  toast.style.maxWidth = '350px';
  
  toast.innerHTML = `
    <button class="delete"></button>
    ${message}
  `;
  
  const container = document.getElementById('toast-container');
  container.appendChild(toast);
  
  // Auto-remove after duration
  setTimeout(() => {
    if (toast.parentNode) {
      toast.classList.add('fade-out');
      setTimeout(() => {
        if (toast.parentNode) {
          toast.parentNode.removeChild(toast);
        }
      }, 300);
    }
  }, duration);
  
  // Remove on delete click
  toast.querySelector('.delete').addEventListener('click', () => {
    toast.parentNode.removeChild(toast);
  });
}

// Usage
showToast('Login successful!', 'success');
showToast('Failed to save changes', 'error');
</script>

Best Practices

• Use appropriate colors for different message types (success, warning, error, info)
• Always provide a way to dismiss notifications
• Keep notification messages clear and concise
• Use icons to enhance visual recognition
• For toast notifications, position them where they won't interfere with user interaction
• Consider auto-dismissal for non-critical messages

Next: Bulma Pagination Component