SweetAlert2

An awesome replacement for JavaScript's alert.

See it in action!

Usage

You can install SweetAlert2 through bower:

bower install sweetalert2

Alternatively, download the package and reference the JavaScript and CSS files manually:

<script src="dist/sweetalert2.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/sweetalert2.css">

Examples

The most basic message:

swal('Hello world!');

A message signaling an error:

swal('Oops...', 'Something went wrong!', 'error');

A warning message, with a function attached to the "Confirm"-button..

swal({
  title: 'Are you sure?',
  text: 'You will not be able to recover this imaginary file!',
  type: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#dd6b55',
  cancelButtonColor: '#d44',
  confirmButtonText: 'Yes, delete it!',
  cancelButtonText: 'No, keet it',
  closeOnConfirm: false
}, function() {
  swal(
    'Deleted!',
    'Your imaginary file has been deleted.',
    'success'
  );
});

View more examples

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 SweetAlert directory, run the command npm install to install npm packages.

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

5. Hack on a separate topic branch created from the latest master.

6. Commit and push the topic branch.

7. Make a pull request and wait for approval.

8. Welcome to the club

Please note that modifications should follow these coding guidelines:

1. Indent is 2 spaces.

2. Javascript code should pass jscs and jshint linters with configurations in project repository.

3. SCSS code should pass scss-lint with configuration in project repository.

4. Vertical whitespace helps readability, don't be afraid to use it.

Thank you for helping out!

Related projects

• SweetAlert
• SweetAlert for Android
• SweetAlert for Bootstrap