sweetalert2

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.

README

SweetAlert2

An awesome replacement for JavaScript's popup boxes.

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 SweetAlert to SweetAlert2 migration guide

---

See SweetAlert2 in action!

Usage

To install:

bower install sweetalert2

Or:

npm install sweetalert2

Or download from CDN: https://www.jsdelivr.com/projects/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">

<!-- for IE support -->
<script src="bower_components/es6-promise/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() {
  swal(
    'Deleted!',
    'Your imaginary file has been deleted.',
    'success'
  );
}, function(dismiss) {
  // dismiss can be 'cancel', 'overlay', 'close', 'timer'
  if (dismiss === 'cancel') {
    swal(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    );
  }
});

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 to true if you want to invert default buttons positions.
showCloseButton	false	Set to true to show close button in top right corner of the modal.
showLoaderOnConfirm	false	Set to true to disable buttons and show that something is loading. Useful for AJAX requests.
preConfirm	null	Function to execute before confirm, should return Promise, see usage example.
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).
input	null	Input field type, can be "text", "email", "password", "textarea", "select", "radio", "checkbox" and "file".
inputPlaceholder	""	Input field placeholder.
inputValue	""	Input field initial value.
inputOptions	{} or Promise	If input parameter is set to "select" or "radio", you can provide options. Object keys will represent options values, object values will represent options text values.
inputAutoTrim	true	Automatically remove whitespaces from both ends of a result string. Set this parameter to false to disable auto-trimming.
inputValidator	null	Validator for input field, should return Promise, see usage example.
inputClass	null	A custom CSS class for the input field.
onOpen	null	Function to run when modal opens, provides modal DOM element as the first argument.
onClose	null	Function to run when modal closes, provides modal DOM element as the first argument.
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.resetDefaults()	Resets settings to their default value.
swal.queue([Array])	Provide array of SweetAlert2 parameters to show multiple modals, one modal after another. See usage example.
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.enableConfirmButton()	Enable the "Confirm"-button only.
swal.disableConfirmButton()	Disable the "Confirm"-button only.
swal.enableLoading() or swal.showLoading()	Disable buttons and show loader. This is useful with AJAX requests.
swal.disableLoading() or swal.hideLoading()	Enable buttons and hide loader.
swal.clickConfirm()	Click the "Confirm"-button programmatically.
swal.clickCancel()	Click the "Cancel"-button programmatically.
swal.showValidationError(error)	Show validation error message.
swal.resetValidationError()	Hide validation error message.
swal.enableInput()	Enable input, this method works with input parameter.
swal.disableInput()	Disable input.

Browser compatibility

SweetAlert2 works in most major browsers (yes, even IE). Some details:

• IE: 10+, Promise polyfill should be included (see usage example).
• Microsoft Edge: 12+
• Safari: 4+
• Firefox: 4+
• Chrome 14+
• Opera: 15+

Note that SweetAlert2 does not and will not provide support or functionality of any kind on IE9 and lower.

Contributing

If you would like to contribute enhancements or fixes, please do the following:

1. Fork the plugin repository.

2. Make sure you have Node and NPM installed.

3. When in the SweetAlert2 directory, run the command npm install to install npm packages.

4. Start gulp watcher gulp watch to automatically build and minify the SCSS and JS-files.

5. Make sure that dist/* files aren't committed and create a pull request.