DEV Community

Cover image for UX SweetAlert, a Symfony bundle integrating the SweetAlert2 library in Symfony applications.
Pentiminax
Pentiminax

Posted on

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

#symfony #php #javascript #ux

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
Enter fullscreen mode Exit fullscreen mode

If you're using Webpack Encore:

npm install --force
npm run watch
Enter fullscreen mode Exit fullscreen mode

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 Pentiminax\UX\SweetAlert\AlertManagerInterface;

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

    return $this->redirectToRoute('dashboard');
}
Enter fullscreen mode Exit fullscreen mode

🔔 Example: Toast Notification 

use Pentiminax\UX\SweetAlert\ToastManagerInterface;

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');
}
Enter fullscreen mode Exit fullscreen mode

🎛️ 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');
Enter fullscreen mode Exit fullscreen mode

🧪 Rendering

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

{{ ux_sweet_alert_scripts() }}
Enter fullscreen mode Exit fullscreen mode

Make sure your frontend listens for the JavaScript event:

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

🧬 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"
/>
Enter fullscreen mode Exit fullscreen mode

When clicked:

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

📚 Docs

❤️ 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

Top comments (0)