---
permalink: /library/sweetalert/
title: Sweetalert
description: Add beautiful, customizable alert messages to your web projects with SweetAlert2, a popular JavaScript library. Easy to install and use, SweetAlert2 is perfect for any project that wants to engage and inform users in a visually appealing way.
handler: sweetalert
data-controller: sweetalert
---
## Laravel
Installation
```shell
composer require php-flasher/flasher-sweetalert-laravel
```
After installation, you need to run another command to set up the necessary assets for PHPFlasher:
```shell
php artisan flasher:install
```
Configuration
```php
[
'sweetalert' => [
'scripts' => [
'/vendor/flasher/sweetalert2.min.js',
'/vendor/flasher/flasher-sweetalert.min.js',
],
'styles' => [
'/vendor/flasher/sweetalert2.min.css',
],
'options' => [
// Optional: Add global options here
'position' => 'center'
],
],
],
];
```
## Symfony
Installation
```shell
composer require php-flasher/flasher-sweetalert-symfony
```
After installation, you need to run another command to set up the necessary assets for PHPFlasher:
```shell
php bin/console flasher:install
```
Configuration
```yaml
# config/packages/flasher.yaml
flasher:
plugins:
sweetalert:
scripts:
- '/vendor/flasher/sweetalert2.min.js'
- '/vendor/flasher/flasher-sweetalert.min.js'
styles:
- '/vendor/flasher/sweetalert2.min.css'
options:
# Optional: Add global options here
position: center
```
---
## Usage
---
> The methods described in the **[Usage](/installation/#-usage)** section can also be used with the `notyf` adapter.
---
To display a notification message, you can either use the `sweetalert()` helper method or obtain an instance of `sweetalert` from the service container.
Then, before returning a view or redirecting, call the `success()` method and pass in the desired message to be displayed.
success
{% assign id = '#/ noty' %}
{% assign type = 'success' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{}' %}
{% include example.html %}
```php
{{ id }}
use Flasher\SweetAlert\Prime\SweetAlertInterface;
class BookController
{
public function saveBook()
{
sweetalert()->success('{{ message }}');
// or simply
sweetalert('{{ message }}');
}
/**
* if you prefer to use dependency injection
*/
public function register(SweetAlertInterface $sweetalert)
{
// ...
$sweetalert->success('{{ site.data.messages["success"] | sample }}');
// ... redirect or render the view
}
}
```
info
{% assign id = '#/ usage info' %}
{% assign type = 'info' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{}' %}
{% include example.html %}
```php
{{ id }}
sweetalert()->{{ type }}('{{ message }}');
```
warning
{% assign id = '#/ usage warning' %}
{% assign type = 'warning' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{}' %}
{% include example.html %}
```php
{{ id }}
sweetalert()->{{ type }}('{{ message }}');
```
error
{% assign id = '#/ usage error' %}
{% assign type = 'error' %}
{% assign message = site.data.messages[type] | sample %}
{% assign options = '{}' %}
{% include example.html %}
```php
{{ id }}
sweetalert()->{{ type }}('{{ message }}');
```
---
For more information on Sweetalert2 alert options and usage, please refer to the original documentation at [https://sweetalert2.github.io](https://sweetalert2.github.io)
---
> The methods described in the **[Usage](/installation/#-usage)** section can also be used with the `notyf` adapter.
---
imageUrl
Add a customized icon for the popup. Should contain a string with the path or URL to the image.
```php
sweetalert()->imageUrl(
string $imageUrl,
int $imageWidth = null,
int $imageHeight = null,
string $imageAlt = null
);
```
---
position
Popup window position, can be `top`, `top-start`, `top-end`, `center`, `center-start`, `center-end`, `bottom`, `bottom-start` or `bottom-end`.
```php
sweetalert()->position(string $position);
```
---
toast
Whether or not an alert should be treated as a toast notification. This option is normally coupled with the
position parameter and a timer. Toasts are NEVER autofocused.
```php
sweetalert()->toast(bool $toast = true, string $position = 'top-end', bool $showConfirmButton = false);
```
---
timer
Auto close timer of the popup. Set in ms (milliseconds).
```php
sweetalert()->timer(int $timer);
```
---
timerProgressBar
If set to `true`, the timer will have a progress bar at the bottom of a popup. Mostly, this feature is useful with toasts.
```php
sweetalert()->timerProgressBar(bool $timerProgressBar = true);
```
---
backdrop
Whether or not SweetAlert2 should show a full screen click-to-dismiss backdrop. Can be either a boolean or a
string which will be assigned to the CSS background property.
```php
sweetalert()->backdrop(bool $backdrop = true);
```
---
grow
Paired with window position, sets the direction the popup should grow in, can be set to `row`, `column`, `fullscreen` or `false`.
```php
sweetalert()->grow(bool|string $grow);
```
---
showConfirmButton
If set to `false`, a `Confirm` button will not be shown.
```php
sweetalert()->showConfirmButton(
bool $showConfirmButton = true,
string $confirmButtonText = null,
string $confirmButtonColor = null,
string $confirmButtonAriaLabel = null
);
```
---
showDenyButton
If set to `true`, a `Deny` button will be shown. It can be useful when you want a popup with 3 buttons.
```php
sweetalert()->showDenyButton(
bool $showDenyButton = true,
string $denyButtonText = null,
string $denyButtonColor = null,
string $denyButtonAriaLabel = null
);
```
---
showCancelButton
If set to `true`, a `Cancel` button will be shown, which the user can click on to dismiss the modal.
```php
sweetalert()->showCancelButton(
bool $showCancelButton = true,
string $cancelButtonText = null,
string $cancelButtonColor = null,
string $cancelButtonAriaLabel = null
);
```
---
confirmButtonText
Use this to change the text on the `Confirm` button.
```php
sweetalert()->confirmButtonText(
string $confirmButtonText,
string $confirmButtonColor = null,
string $confirmButtonAriaLabel = null
);
```
---
denyButtonText
Use this to change the text on the `Deny` button.
```php
sweetalert()->denyButtonText(
string $denyButtonText,
string $denyButtonColor = null,
string $denyButtonAriaLabel = null
);
```
---
cancelButtonText
Use this to change the text on the `Cancel` button.
```php
sweetalert()->cancelButtonText(
string $cancelButtonText,
string $cancelButtonColor = null,
string $cancelButtonAriaLabel = null
);
```
---
showCloseButton
Set to `true` to show close button in top right corner of the popup.
```php
sweetalert()->showCloseButton(bool $showCloseButton = true);
```