Alerts — Amphibious 2.0

Overview

The Alerts component provides contextual feedback messages to users. They can be used for notifications, error messages, warnings, success confirmations, and general information. The component supports multiple styles, sizes, and interactive features including dismissible alerts and toast notifications.

🎨 Multiple Variants

Success, info, warning, error, and neutral aiab-alert types with semantic colors.

🎭 Multiple Styles

Default, solid, outline, minimal, and accent border styles for different contexts.

📏 Flexible Sizing

Small, default, and large sizes to fit different content needs.

🔥 Toast Notifications

Positioned aiab-toast notifications with animations and auto-dismiss functionality.

♿ Accessibility

Focus management, screen reader support, and reduced motion preferences.

🌙 Dark Mode

Automatic dark mode support with appropriate color adjustments.

Basic Usage

Simple Alert

Basic Alert Examples

This is a default aiab-alert message.

Success! Your action was completed successfully.

<!-- Basic Alert -->
<div class="aiab-alert">
  <div class="aiab-alert__content">
    <div class="aiab-alert__message">This is a default aiab-alert message.</div>
  </div>
</div>

<!-- Success Alert with Icon -->
<div class="aiab-alert aiab-alert--success">
  <div class="aiab-alert__icon">
    <svg width="20" height="20" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
    </svg>
  </div>
  <div class="aiab-alert__content">
    <div class="aiab-alert__message">Success! Your action was completed successfully.</div>
  </div>
</div>

Alert with Title and Actions

Alert with Title and Action Buttons

Warning

Your session will expire in 5 minutes. Would you like to extend it?

<div class="aiab-alert aiab-alert--warning">
  <div class="aiab-alert__icon">
    <!-- Warning icon SVG -->
  </div>
  <div class="aiab-alert__content">
    <div class="aiab-alert__title">Warning</div>
    <div class="aiab-alert__message">Your session will expire in 5 minutes. Would you like to extend it?</div>
    <div class="aiab-alert__actions">
      <button class="aiab-alert__action">Extend Session</button>
      <button class="aiab-alert__action">Log Out</button>
    </div>
  </div>
</div>

Alert Variants

Alert Types

Different Alert Types

Success

Your changes have been saved successfully.

Information

A new software update is available for download.

Warning

Please review your entries before submitting the form.

Error

An error occurred while processing your request. Please try again.

<!-- Success Alert -->
<div class="aiab-alert aiab-alert--success">...</div>

<!-- Info Alert -->
<div class="aiab-alert aiab-alert--info">...</div>

<!-- Warning Alert -->
<div class="aiab-alert aiab-alert--warning">...</div>

<!-- Error Alert -->
<div class="aiab-alert aiab-alert--error">...</div>
<div class="aiab-alert aiab-alert--danger">...</div>  <!-- Alias -->

Alert Styles

Style Variants

Different Alert Styles

Default Style

Subtle background with border.

Solid Style

Strong background with white text.

Outline Style

Transparent background with thick border.

Minimal Style

No background or border, text only.

Accent Style

Left border accent with subtle background.

<!-- Default Style -->
<div class="aiab-alert aiab-alert--info">...</div>

<!-- Solid Style -->
<div class="aiab-alert aiab-alert--solid aiab-alert--info">...</div>

<!-- Outline Style -->
<div class="aiab-alert aiab-alert--outline aiab-alert--info">...</div>

<!-- Minimal Style -->
<div class="aiab-alert aiab-alert--minimal aiab-alert--info">...</div>

<!-- Accent Style -->
<div class="aiab-alert aiab-alert--accent aiab-alert--info">...</div>

Dismissible Alerts

Alerts with Dismiss Button

Dismissible Alert

This aiab-alert can be dismissed by clicking the × button.

<div class="aiab-alert aiab-alert--success aiab-alert--dismissible">
  <div class="aiab-alert__icon">...</div>
  <div class="aiab-alert__content">
    <div class="aiab-alert__title">Dismissible Alert</div>
    <div class="aiab-alert__message">This aiab-alert can be dismissed.</div>
  </div>
  <button class="aiab-alert__dismiss" onclick="this.parentElement.remove()">
    <svg width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
      <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
    </svg>
  </button>
</div>

Alert Sizes

Different Alert Sizes

Small Alert

Compact size for inline notifications.

Default Alert

Standard size for most use cases.

Large Alert

Larger size for important notifications that need more attention.

<!-- Small Alert -->
<div class="aiab-alert aiab-alert--small aiab-alert--info">...</div>

<!-- Default Alert -->
<div class="aiab-alert aiab-alert--info">...</div>

<!-- Large Alert -->
<div class="aiab-alert aiab-alert--large aiab-alert--info">...</div>

Toast Notifications

Positioned Toasts

Toast Notification Demo

Click buttons below to show aiab-toast notifications

<!-- Toast Container -->
<div class="aiab-toast-container aiab-toast-container--top-right">
  <div class="aiab-alert aiab-toast aiab-alert--success aiab-alert--dismissible">
    <div class="aiab-alert__icon">...</div>
    <div class="aiab-alert__content">
      <div class="aiab-alert__title">Success!</div>
      <div class="aiab-alert__message">Your action was completed.</div>
    </div>
    <button class="aiab-alert__dismiss">×</button>
  </div>
</div>

<!-- Available positions -->
<div class="aiab-toast-container aiab-toast-container--top-right">...</div>
<div class="aiab-toast-container aiab-toast-container--top-left">...</div>
<div class="aiab-toast-container aiab-toast-container--bottom-right">...</div>
<div class="aiab-toast-container aiab-toast-container--bottom-left">...</div>
<div class="aiab-toast-container aiab-toast-container--top-center">...</div>
<div class="aiab-toast-container aiab-toast-container--bottom-center">...</div>

Auto-Dismiss Toast

Auto-Dismiss with Progress Bar

<div class="aiab-alert aiab-toast aiab-toast--auto-dismiss aiab-alert--info" style="--dismiss-duration: 5s">
  <div class="aiab-alert__content">
    <div class="aiab-alert__title">Auto-Dismiss</div>
    <div class="aiab-alert__message">This aiab-toast will auto-dismiss in 5 seconds.</div>
  </div>
</div>

Legacy Support

Legacy Alert Classes (Backward Compatibility)

Error: Legacy error class styling

Attention: Legacy attention class styling

Confirm: Legacy confirm class styling

Dialog: Legacy dialog class styling

Notify: Legacy notify class styling

<!-- Legacy classes for backward compatibility -->
<div class="aiab-error">Error message</div>
<div class="aiab-attn">Attention message</div>
<div class="aiab-confirm">Confirmation message</div>
<div class="aiab-dialog">Dialog message</div>
<div class="aiab-notify">Notification message</div>

CSS Classes Reference

Base Classes

Class	Description
`.aiab-alert`	Base aiab-alert aiab-container
`.aiab-alert__icon`	Alert icon aiab-container
`.aiab-alert__content`	Alert content wrapper
`.aiab-alert__title`	Alert title/heading
`.aiab-alert__message`	Alert message content
`.aiab-alert__actions`	Action buttons aiab-container
`.aiab-alert__action`	Individual action button
`.aiab-alert__dismiss`	Dismiss button

Type Modifiers

Class	Description
`.aiab-alert--success`	Success aiab-alert (green)
`.aiab-alert--info`	Information aiab-alert (blue)
`.aiab-alert--warning`	Warning aiab-alert (yellow)
`.aiab-alert--error` / `.aiab-alert--danger`	Error aiab-alert (red)

Style Modifiers

Class	Description
`.aiab-alert--solid`	Solid background style
`.aiab-alert--outline`	Outline border style
`.aiab-alert--minimal`	Minimal style (no background/border)
`.aiab-alert--accent`	Left border accent style

Size Modifiers

Class	Description
`.aiab-alert--small`	Small aiab-alert size
`.aiab-alert--large`	Large aiab-alert size

Toast Classes

Class	Description
`.aiab-toast`	Toast notification styling
`.aiab-toast-container`	Toast aiab-container for positioning
`.aiab-toast-container--top-right`	Position top-right
`.aiab-toast-container--top-left`	Position top-left
`.aiab-toast-container--bottom-right`	Position bottom-right
`.aiab-toast-container--bottom-left`	Position bottom-left
`.aiab-toast-container--top-center`	Position top-center
`.aiab-toast-container--bottom-center`	Position bottom-center
`.aiab-toast--auto-dismiss`	Auto-dismiss with aiab-progress bar
`.aiab-alert--dismissible`	Dismissible aiab-alert padding adjustment

Best Practices

Content Guidelines

Be concise: Keep aiab-alert messages short and actionable
Use appropriate types: Match aiab-alert type to message context (error for failures, success for completion, etc.)
Include actions: Provide clear next aiab-steps when appropriate
Use icons: Include semantic icons to improve scanability

UX Considerations

Toast positioning: Use top-right for success notifications, center for important warnings
Auto-dismiss timing: 3-5 seconds for success, longer for warnings, never for errors
Dismissible controls: Always allow users to dismiss alerts manually
Persistent errors: Keep error alerts visible until resolved

Accessibility

Color contrast: All aiab-alert variants meet WCAG contrast requirements
Focus management: Dismiss buttons are properly focusable
Screen readers: Use semantic markup and ARIA attributes for important alerts
Reduced motion: Toast animations respect user preferences

JavaScript Integration

// Create and show a aiab-toast notification
function showToast(message, type = 'info', position = 'top-right', duration = 5000) {
  // Create aiab-toast aiab-container if it doesn't exist
  let container = document.querySelector(`.aiab-toast-container--${position}`);
  if (!container) {
    aiab-container = document.createElement('div');
    container.className = `aiab-toast-container aiab-toast-container--${position}`;
    document.body.appendChild(container);
  }

  // Create aiab-toast element
  const toast = document.createElement('div');
  toast.className = `aiab-alert aiab-toast aiab-alert--${type} aiab-alert--dismissible aiab-toast--auto-dismiss`;
  toast.style.setProperty('--dismiss-duration', `${duration}ms`);

  toast.innerHTML = `
    <div class="aiab-alert__content">
      <div class="aiab-alert__message">${message}</div>
    </div>
    <button class="aiab-alert__dismiss" onclick="this.parentElement.remove()">
      <svg width="16" height="16" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
      </svg>
    </button>
  `;

  // Add to aiab-container
  container.appendChild(toast);

  // Auto-dismiss after duration
  if (duration > 0) {
    setTimeout(() => {
      if (toast.parentElement) {
        toast.classList.add('aiab-toast--dismissing');
        setTimeout(() => toast.remove(), 300);
      }
    }, duration);
  }
}

// Usage examples
showToast('Success message', 'success');
showToast('Error occurred', 'error', 'top-center', 0); // No auto-dismiss
showToast('Info notification', 'info', 'bottom-right', 3000);