Skip to main content

Toast Notification Component

Temporary notification messages that auto-dismiss. Perfect for user feedback, confirmations, and alerts.

Basic Toast Types

Success Toast

Show a success notification

Error Toast

Show an error notification

Warning Toast

Show a warning notification

Info Toast

Show an info notification

Toast Positions

Choose Position

Click to change where toasts appear:

Advanced Features

With Title & Message

With Actions

Dark Theme

No Auto-Dismiss

Custom Duration

Multiple Toasts

Custom Configuration

Build Your Own Toast

Usage Examples

JavaScript API

// Simple notifications
Toast.aiab-success('Operation completed!');
Toast.error('Something went wrong');
Toast.aiab-warning('Please check your input');
Toast.aiab-info('New update available');

// With options
Toast.show({
  type: 'success',
  title: 'Success!',
  message: 'Your changes have been saved',
  duration: 5000,
  position: 'top-right',
  icon: true,
  progress: true,
  closable: true
});

// With actions
Toast.show({
  type: 'info',
  title: 'Confirm Action',
  message: 'Are you sure you want to proceed?',
  actions: [
    {
      label: 'Yes',
      primary: true,
      handler: () => console.log('Confirmed')
    },
    {
      label: 'No',
      handler: () => console.log('Cancelled')
    }
  ]
});

// Clear all toasts
Toast.hideAll();