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

July 4, 2025

This content originally appeared on DEV Community and was authored by Pentiminax

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 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');
}

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');
}

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:

Fires a LiveComponent event.
Displays SweetAlert modal.
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

This content originally appeared on DEV Community and was authored by Pentiminax