UX SweetAlert, a Symfony bundle integrating the SweetAlert2 library in Symfony applications.

Looking to enhance your Symfony application’s UX with elegant modal dialogs and toast notifications? Meet UX SweetAlert, a Symfony UX bundle that seamlessly integrates SweetAlert2 into your PHP backend and Twig frontend.

✨ Features

• ✅ Modal alerts (success, error, info, warning, question)
• 🔥 Toast notifications with customizable timers and positions
• 💡 LiveComponent integration for confirm dialogs
• 🧠 Uses Symfony’s FlashBag under the hood
• 🎨 Supports light, dark, or auto themes
• 🛠 Fluent API for alert customization

⚙️ Installation

composer require pentiminax/ux-sweet-alert

If you’re using Webpack Encore:

npm install --force
npm run watch

Already using Symfony UX? You’re good to go!

🚀 Getting Started

Start by injecting the AlertManagerInterface or ToastManagerInterface in your controller.

✅ Example: Alert Modal

use PentiminaxUXSweetAlertAlertManagerInterface;

public function updateSettings(AlertManagerInterface $alertManager): Response
{
    $alertManager->success(
        id: 'update-success',
        title: 'Update Successful',
        text: 'Your settings have been saved.'
    );

    return $this->redirectToRoute('dashboard');
}

🔔 Example: Toast Notification

use PentiminaxUXSweetAlertToastManagerInterface;

public function profile(ToastManagerInterface $toastManager): Response
{
    $toastManager->success(
        id: 'profile-updated',
        title: 'Profile Updated!',
        text: 'Changes saved.',
        timer: 3000,
        timerProgressBar: true
    );

    return $this->redirectToRoute('profile');
}

🎛️ Customizing Alerts

All alerts return an Alert object which supports a fluent API:

$alert = $alertManager->info('info-alert', 'Heads up!', 'Just a quick note');
$alert
    ->withCancelButton()
    ->withDenyButton()
    ->theme(Theme::DARK)
    ->confirmButtonColor('#0d6efd');

🧪 Rendering

To render alerts and toasts, include the Twig helper in your base layout:

{{ ux_sweet_alert_scripts() }}

Make sure your frontend listens for the JavaScript event:

document.addEventListener('ux-sweet-alert:alert:added', event => {
    Swal.fire(event.detail);
});

🧬 UX Live Component Integration

Need a confirmation popup before taking action? Use the provided ConfirmButton component:

<twig:SweetAlert:ConfirmButton
    title="Are you sure?"
    text="This action cannot be undone."
    icon="warning"
    showCancelButton="true"
    callback="onConfirm"
/>

When clicked:

1. Fires a LiveComponent event.
2. Displays SweetAlert modal.
3. Triggers the onConfirm() callback if confirmed.

📚 Docs

• Alerts
• Toasts
• Live Component

❤️ Why Use This?

UX SweetAlert gives you an elegant, JavaScript-powered feedback system directly from your Symfony controllers — no need to manage messy JS state manually.

If you’re already using Symfony UX and Stimulus, this is a no-brainer.

📦 GitHub repository : https://github.com/pentiminax/ux-sweet-alert