# Toast Notifications

Note: This is implemented only in V2

Our toast notification system is built on iziToast with seamless Bootstrap theme integration. It ensures consistent styling and provides easy-to-use methods for displaying notifications across the application.

We have modified the original iziToast source to align with our design, incorporating Bootstrap color variants and enhancing functionality. Additionally, we have introduced more convenient methods to trigger toasts from both PHP/Laravel and JavaScript.

# Setup

The toast system's css and js files are already included in app.css and app.js files. If you need to add it to a custom layout where app.css and app.js are not included, you can include the following in your layout:

<!-- In the header -->
<link href="{{ asset('vendors/izitoast/css/iziToast.min.css') }}" rel="stylesheet" type="text/css"/>
<link href="{{ asset('css/iziToast-custom.css') }}" rel="stylesheet" type="text/css"/>

<!-- Before closing body -->
<script src="{{ asset('iziToast.js') }}"></script>
<script src="{{ asset('js/toast-helper.js') }}"></script>

# Basic Usage

# In Controllers

// Basic toast without mentioning color variant (defaults to primary)
toast('User created successfully!');
// Basic success toast
toast('Operation completed successfully', 'success');
// Error toast
toast('An error occurred', 'error');
// Warning toast
toast('Please review your input', 'warning');
// Info toast
toast('New updates available', 'info');
// Primary toast
toast('System notification', 'primary');

# Different ways to use inside controller

// Method 1: Using the helper function
toast('User created successfully!', 'success');

// Method 2: Using session directly
session()->flash('toast', [
    'message' => 'User created successfully!',
    'type' => 'success',
    'solid' => true,
    'position' => 'topRight'
]);

// Method 3: Chaining with redirect
return redirect()
    ->route('users.index')
    ->with('toast', [
        'message' => 'User created successfully!',
        'type' => 'success',
        'solid' => true,
        'position' => 'topRight'
    ]);

# In Blade Views (JavaScript)

// Basic success toast
toast('Operation completed successfully', 'success');
// With custom position
toast('Message', 'success', true, 'topLeft');
// Outline variant
toast('Message', 'success', false);

# Parameters

The toast function accepts the following parameters:

toast(message, type, solid, position)

message (string): The message to display
type (string): Toast type ('success', 'error', 'warning', 'info', 'primary')
solid (boolean, optional): Solid or outline variant (default: true)
position (string, optional): Toast position (default: 'topRight')

# Toast Types

Success
```
toast('Success message', 'success');
```
Error
```
toast('Error message', 'error');
```
Warning
```
toast('Warning message', 'warning');
```
Info
```
toast('Info message', 'info');
```
Primary
```
toast('Primary message', 'primary');
```

# Variants

# Outline (Default)

toast('Outline variant', 'success');
// or with title
toastWithTitle('Success', 'Outline variant', 'success');

# Solid

toast('Solid variant', 'success', true);
// or with title
toastWithTitle('Success', 'Solid variant', 'success', true);

# Positions

Available positions:

topRight (default)
topLeft
bottomRight
bottomLeft
topCenter
bottomCenter
center

toast('Message', 'success', true, 'topLeft');

# Common Use Cases

# In Controllers (Form Submission)

public function store(Request $request)
{
    try {
        // Your logic here
        toast('Record created successfully', 'success');
        return redirect()->route('index');
    } catch (\Exception $e) {
        toast('Error creating record: ' . $e->getMessage(), 'error');
        return back()->withInput();
    }
}

# In Blade Views (AJAX Response)

$.ajax({
    // ... ajax configuration
    success: function(response) {
        toast('Operation successful', 'success');
    },
    error: function(xhr) {
        toast('An error occurred', 'error');
    }
});

# Validation Feedback

if ($validator->fails()) {
    toast('Please check your input', 'warning');
    return back()->withErrors($validator);
}

# Styling

The toast system automatically uses Bootstrap theme colors for consistency. Custom styles can be added in resources/css/iziToast-custom.css.

# Toast With Title

We have one more helper function to show toast with title:

toastWithTitle(title, message, type, solid, position)

title (string): The title of the toast
message (string): The message to display
type (string): Toast type ('success', 'error', 'warning', 'info', 'primary')
solid (boolean, optional): Solid or outline variant (default: false)
position (string, optional): Toast position (default: 'topRight')

# Notes

Toasts automatically close after 5 seconds
All toasts include a progress bar and close button
Colors automatically match your Bootstrap theme
Outline variants use theme colors for borders and text
Solid variants use white text for better contrast

← Index Alerts →