UX SweetAlert
GitHub
Browse documentation

Themes & Styling

UX SweetAlert passes theme and styling data directly into the serialized alert payload. That keeps your Symfony code in charge of the visual intent while SweetAlert2 handles the rendering.

Theme enum support

The Theme enum includes:

  • Auto, Light, Dark, Borderless, Minimal, EmbedIframe
  • Bootstrap4, Bootstrap4Light, Bootstrap4Dark
  • Bootstrap5, Bootstrap5Light, Bootstrap5Dark
  • MaterialUI, MaterialUILight, MaterialUIDark
  • Bulma, BulmaLight, BulmaDark

Applying a theme

  use Pentiminax\UX\SweetAlert\Enum\Theme;

$alertManager
    ->success('Saved')
    ->theme(Theme::Bootstrap5Dark);

Loading the matching CSS

The package metadata exposes SweetAlert2 theme files in assets/package.json, but the optional theme styles are not auto-enabled by default. If you want a framework theme, make sure the matching SweetAlert2 CSS is imported by your asset pipeline. With AssetMapper, set the theme file to true under autoimport in assets/controllers.json and add it to the import map:

  php bin/console importmap:require sweetalert2/themes/bootstrap-5.css

Fine-grained styling

The Alert object lets you control button colors and CSS hooks:

  $alertManager
    ->question('Archive item?')
    ->confirmButtonColor('#ff6b4f')
    ->cancelButtonColor('#2f4858')
    ->denyButtonColor('#f4b400')
    ->theme(Theme::Dark);

Button colors are only sent when you set them, here or in the defaults config: otherwise the theme styles the buttons. A color you set wins over the theme.

You can also pass a customClass array when creating alerts through the manager helpers.

  $alertManager
    ->info('Welcome back')
    ->width('32rem')          // int (px) or any CSS length
    ->padding('3em')
    ->background('#fff url(/images/trees.png)')
    ->color('#716add');

These keys are only sent when set, so SweetAlert2 and theme defaults apply otherwise.

Show and hide animations

showClass() and hideClass() set the CSS classes put on the popup when it opens and closes. Pass an Animation preset or any class string:

  use Pentiminax\UX\SweetAlert\Enum\Animation;

$alertManager
    ->success('Saved')
    ->showClass(Animation::FadeInUp)
    ->hideClass(Animation::FadeOutDown);

// Serialized as {"showClass": {"popup": "animate__animated animate__fadeInUp animate__faster"}, ...}

Presets: FadeIn, FadeOut, FadeInUp, FadeOutDown, FadeInDown, FadeOutUp, ZoomIn, ZoomOut.

Content-level styling options

Beyond the theme name, the alert model supports:

  • html(...) for rich HTML content
  • setFooter(...) for footer text or markup
  • setImageUrl(...), setImageAlt(...), setImageHeight(...), and setImageWidth(...)
  • setDraggable(...) and setTopLayer(...)

Styling lifecycle events

The frontend controller emits two useful browser events around every modal render:

  • sweetalert:before-fire
  • sweetalert:after-fire

Both expose the SweetAlert options object, making them useful when your application needs to add cross-cutting frontend tweaks without changing the PHP API.