What is sweetalert2?
SweetAlert2 is a beautiful, responsive, customizable, and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. It provides a wide range of alert types, including success, error, warning, and information alerts, as well as more complex modal dialogs.
What are sweetalert2's main functionalities?
Basic Alert
Displays a basic alert with a message.
Swal.fire('Hello world!');
Success Alert
Displays a success alert with a title, message, and success icon.
Swal.fire('Good job!', 'You clicked the button!', 'success');
Error Alert
Displays an error alert with a title, message, and error icon.
Swal.fire({ icon: 'error', title: 'Oops...', text: 'Something went wrong!' });
Custom HTML Alert
Displays an alert with custom HTML content, including bold text, links, and custom buttons.
Swal.fire({ title: '<strong>HTML <u>example</u></strong>', icon: 'info', html: 'You can use <b>bold text</b>, <a href="//sweetalert2.github.io">links</a> and other HTML tags', showCloseButton: true, showCancelButton: true, focusConfirm: false, confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!', confirmButtonAriaLabel: 'Thumbs up, great!', cancelButtonText: '<i class="fa fa-thumbs-down"></i>', cancelButtonAriaLabel: 'Thumbs down' });
Input Alert
Displays an alert with an input field for the user to submit data, and performs an asynchronous operation based on the input.
Swal.fire({ title: 'Submit your Github username', input: 'text', inputAttributes: { autocapitalize: 'off' }, showCancelButton: true, confirmButtonText: 'Look up', showLoaderOnConfirm: true, preConfirm: (login) => { return fetch(`//api.github.com/users/${login}`) .then(response => { if (!response.ok) { throw new Error(response.statusText) } return response.json() }) .catch(error => { Swal.showValidationMessage(`Request failed: ${error}`) }) }, allowOutsideClick: () => !Swal.isLoading() }).then((result) => { if (result.isConfirmed) { Swal.fire({ title: `${result.value.login}'s avatar`, imageUrl: result.value.avatar_url }) } });
Other packages similar to sweetalert2
noty
Noty is a dependency-free notification library that makes it easy to create alert, success, error, warning, and information messages as an alternative to SweetAlert2. Noty is more focused on notifications rather than modal dialogs and offers a different set of customization options.
toastr
Toastr is a simple JavaScript toast notification library that is similar to SweetAlert2 but focuses on non-blocking notifications. It is lightweight and easy to use, making it a good choice for simple alert needs without the need for modal dialogs.
bootbox
Bootbox.js is a small JavaScript library that allows you to create programmatic dialog boxes using Bootstrap modals. It provides similar functionalities to SweetAlert2 but is tightly integrated with Bootstrap, making it a good choice if you are already using Bootstrap in your project.
SweetAlert2
An awesome replacement for JavaScript's alert.
What's the difference between SweetAlert and SweetAlert2?
Reason of creating this fork is inactivity of original SweetAlert plugin:
http://stackoverflow.com/a/27842854/1331425
See SweetAlert2 in action!
Usage
To install:
bower install sweetalert2
To use:
<script src="bower_components/sweetalert2/dist/sweetalert2.min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/sweetalert2/dist/sweetalert2.min.css">
<script src="bower_components/es6-promise-polyfill/promise.min.js"></script>
Examples
The most basic message:
swal('Hello world!');
A message signaling an error:
swal('Oops...', 'Something went wrong!', 'error');
Handling the result of SweetAlert2 modal:
swal({
title: 'Are you sure?',
text: 'You will not be able to recover this imaginary file!',
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, keep it',
}).then(function(isConfirm) {
if (isConfirm === true) {
swal(
'Deleted!',
'Your imaginary file has been deleted.',
'success'
);
} else if (isConfirm === false) {
swal(
'Cancelled',
'Your imaginary file is safe :)',
'error'
);
} else {
}
});
swal(...)
returns a Promise Object, isConfirm
parameter in Promise method then
will be:
true
for "Confirm"-buttonfalse
for "Cancel"-buttonundefined
for Esc press, close button or outside click
View more examples
Modal Types
success | error | warning | info | question |
---|
| | | | |
Configuration
Argument | Default value | Description |
---|
title | null | The title of the modal. It can either be added to the object under the key "title" or passed as the first parameter of the function. |
text | null | A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function. |
html | null | A HTML description for the modal. If "text" and "html" parameters are provided in the same time, "text" will be used. |
type | null | The type of the modal. SweetAlert2 comes with 5 built-in types which will show a corresponding icon animation: warning , error , success , info and question . It can either be put in the array under the key type or passed as the third parameter of the function. |
customClass | null | A custom CSS class for the modal. |
animation | true | If set to false , modal CSS animation will be disabled. |
allowOutsideClick | true | If set to false , the user can't dismiss the modal by clicking outside it. |
allowEscapeKey | true | If set to false , the user can't dismiss the modal by pressing the Escape key. |
showConfirmButton | true | If set to false , a "Confirm"-button will not be shown. It can be useful when you're using html parameter for custom HTML description. |
showCancelButton | false | If set to true , a "Cancel"-button will be shown, which the user can click on to dismiss the modal. |
confirmButtonText | "OK" | Use this to change the text on the "Confirm"-button. |
cancelButtonText | "Cancel" | Use this to change the text on the "Cancel"-button. |
confirmButtonColor | "#3085d6" | Use this to change the background color of the "Confirm"-button (must be a HEX value). |
cancelButtonColor | "#aaa" | Use this to change the background color of the "Cancel"-button (must be a HEX value). |
confirmButtonClass | null | A custom CSS class for the "Confirm"-button. |
cancelButtonClass | null | A custom CSS class for the "Cancel"-button. |
buttonsStyling | true | Apply default swal2 styling to buttons. If you want to use your own classes (e.g. Bootstrap classes) set this parameter to false . |
reverseButtons | false | Set this parameter to true if you want to invert default buttons positions. |
showCloseButton | false | Set this parameter to true to show close button in top right corner of the modal. |
closeOnConfirm | true | Set to false if you want the modal to stay open even if the user presses the "Confirm"-button. This is especially useful if the function attached to the "Confirm"-button is another SweetAlert2. |
imageUrl | null | Add a customized icon for the modal. Should contain a string with the path or URL to the image. |
imageWidth | null | If imageUrl is set, you can specify imageWidth to describes image width in px. |
imageHeight | null | Custom image height in px. |
imageClass | null | A custom CSS class for the customized icon. |
timer | null | Auto close timer of the modal. Set in ms (milliseconds). |
width | 500 | Modal window width, including paddings (box-sizing: border-box ). |
padding | 20 | Modal window padding. |
background | "#fff" | Modal window background (CSS background property). |
You can redefine default params by using swal.setDefaults(customParams)
where customParams
is an object.
Methods
Method | Description |
---|
swal.setDefaults({Object}) | If you end up using a lot of the same settings when calling SweetAlert2, you can use setDefaults at the start of your program to set them once and for all! |
swal.close() or swal.closeModal() | Close the currently open SweetAlert2 modal programmatically. |
swal.enableButtons() | Enable confirm and cancel buttons. |
swal.disableButtons() | Disable confirm and cancel buttons. |
swal.enableLoading() | Disable buttons and show loader. This is useful with AJAX requests. |
swal.disableLoading() | Enable buttons and hide loader. |
swal.clickConfirm() | Click "Confirm"-button programmatically. |
swal.clickCancel() | Click "Cancel"-button programmatically. |
Contributing
If you would like to contribute enhancements or fixes, please do the following:
-
Fork the plugin repository.
-
Make sure you have Node and NPM installed.
-
When in the SweetAlert directory, run the command npm install
to install npm packages.
-
Start gulp watcher gulp watch
to automatically minify the SCSS and JS-files.
-
Make a pull request and wait for approval.