Variants

With Title

Positions

Duration Options

Custom Icon

Overview

Toast notifications provide non-intrusive feedback messages that appear temporarily and automatically dismiss.

Usage

Use JavaScript functions to show toasts:

// Simple usage
toastSuccess('Item saved successfully!');
toastError('An error occurred.');
toastWarning('Please check your input.');
toastInfo('Here is some information.');

// With options
showToast('success', 'Message here', {
    title: 'Title',
    duration: 5000,
    dismissible: true,
    position: 'top-right',
    icon: 'custom-icon'
});

Variants

  • success - Green, for successful operations
  • error - Red, for errors
  • warning - Yellow, for warnings
  • info - Blue/Sky, for informational messages

Positions

Available positions:

  • top-right - Default position
  • top-left
  • top-center
  • bottom-right
  • bottom-left
  • bottom-center

Options

title - string|null

Optional title displayed above message

duration - number (default: 5000)

Auto-dismiss duration in milliseconds (0 = no auto-dismiss)

dismissible - bool (default: true)

Show dismiss button

position - string (default: top-right)

Toast position

icon - string|null

Custom FontAwesome icon name (overrides default icon)

Functions

  • showToast(variant, message, options) - General toast function
  • toastSuccess(message, options) - Success toast shorthand
  • toastError(message, options) - Error toast shorthand
  • toastWarning(message, options) - Warning toast shorthand
  • toastInfo(message, options) - Info toast shorthand

Features

  • Auto-dismiss with configurable duration
  • Manual dismiss button
  • Multiple position options
  • Stack multiple toasts
  • Smooth animations
  • Dark mode support
  • Accessibility (ARIA attributes)
  • Custom icons support
  • Title and message support