Post

Toast Notification System Documentation

Posted Updated
By
3 min read
Toast Notification System Documentation

Toast Notification System Documentation

Overview

The toast.php file provides a reusable toast notification system for PHP applications. It supports multiple toast types (primary, secondary, info, danger, success, warning), each with a corresponding icon and color. Include the file in your PHP project to use the Toast class in JavaScript for displaying notifications.

Installation

  1. Save the toast.php file in your project directory (e.g., includes/toast.php).
  2. Include it in your PHP file:
    1

    <?php require 'includes/toast.php'; ?>
  3. Ensure your PHP file outputs within an HTML structure (e.g., <body>).

Usage

The Toast class is globally available in JavaScript after including toast.php. Create an instance of Toast and call its show method to display toasts.

Methods

The Toast class provides one main method to display toasts:

show({ message, type, duration, position })

Displays a toast notification with a message, type-specific icon, and color.

  • Parameters:
    • message (string): The message to display in the toast.
    • type (string, default: 'primary'): The type of toast. Options: 'primary', 'secondary', 'info', 'danger', 'success', 'warning'.
    • duration (number, default: 3000): Duration in milliseconds before the toast auto-closes.
    • position (string, default: 'top-right'): Position of the toast container. Options: 'top-right', 'top-left', 'bottom-right', 'bottom-left'.
  • Example:
    1
2
3
4
5
6
7

    const toast = new Toast();
toast.show({
  message: 'Operation completed successfully!',
  type: 'success',
  duration: 4000,
  position: 'top-right'
});

Toast Types and Icons

Each toast type has a unique icon and colored left border:

  • Primary: ℹ️ (Info symbol, blue border: --color-primary)
  • Secondary: ⚙️ (Gear symbol, gray border: --color-secondary)
  • Info: 🔔 (Bell symbol, teal border: --color-info)
  • Danger: ❌ (Cross symbol, red border: --color-danger)
  • Success: ✅ (Checkmark symbol, green border: --color-success)
  • Warning: ⚠️ (Warning symbol, yellow border: --color-warning)

Features

  • Modern UI: Uses CSS variables (--color-background, --color-foreground, --color-border, and type-specific colors) for a dark, minimal theme with smooth slide-in animations.
  • Icons: Each toast type includes a modern emoji icon for visual distinction.
  • Auto-Close: Toasts disappear after the specified duration.
  • Manual Close: Click the toast to close it immediately.
  • Positioning: Supports four corner positions (top-right, top-left, bottom-right, bottom-left).
  • Stacking: Multiple toasts stack vertically (top-down for top positions, bottom-up for bottom positions).

Example Integration

Create a PHP file (e.g., index.php):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Toasts</title>
</head>
<body>
  <button onclick="showPrimaryToast()">Primary Toast</button>
  <button onclick="showSecondaryToast()">Secondary Toast</button>
  <button onclick="showInfoToast()">Info Toast</button>
  <button onclick="showDangerToast()">Danger Toast</button>
  <button onclick="showSuccessToast()">Success Toast</button>
  <button onclick="showWarningToast()">Warning Toast</button>

  <?php require 'includes/toast.php'; ?>

  <script>
    const toast = new Toast();

    function showPrimaryToast() {
      document.activeElement?.blur();
      toast.show({
        message: 'This is a primary toast!',
        type: 'primary',
        duration: 3000,
        position: 'top-right'
      });
    }

    function showSecondaryToast() {
      document.activeElement?.blur();
      toast.show({
        message: 'This is a secondary toast!',
        type: 'secondary',
        duration: 3000,
        position: 'top-left'
      });
    }

    function showInfoToast() {
      document.activeElement?.blur();
      toast.show({
        message: 'This is an info toast!',
        type: 'info',
        duration: 3000,
        position: 'bottom-right'
      });
    }

    function showDangerToast() {
      document.activeElement?.blur();
      toast.show({
        message: 'This is a danger toast!',
        type: 'danger',
        duration: 3000,
        position: 'bottom-left'
      });
    }

    function showSuccessToast() {
      document.activeElement?.blur();
      toast.show({
        message: 'This is a success toast!',
        type: 'success',
        duration: 3000,
        position: 'top-right'
      });
    }

    function showWarningToast() {
      document.activeElement?.blur();
      toast.show({
        message: 'This is a warning toast!',
        type: 'warning',
        duration: 3000,
        position: 'top-right'
      });
    }
  </script>
</body>
</html>

Notes

  • Include toast.php after the <body> tag or where the toast styles and scripts are needed.
  • The toast system is self-contained and requires no external dependencies.
  • Customize the CSS variables in :root to match your application’s theme (e.g., adjust --color-primary for different shades).
  • Toasts are not focusable by keyboard to keep them non-intrusive, but they can be closed by clicking.
  • Use a single Toast instance for multiple toasts to maintain a single container.
Web Dev, Tutorial
php UIUX
This post is licensed under CC BY 4.0 by the author.