# SweetAlert2

Use this premium notifications plugin to show modal prompts to your users

## Getting started

You need to include the following javascript file before the end of the `body` tag:

    <script src="@@path/vendor/sweetalert2/dist/sweetalert2.all.min.js"></script>

And you also need to include the following stylesheet before the end of the `head` tag:

    <link type="text/css" href="@@path/vendor/sweetalert2/dist/sweetalert2.min.css" rel="stylesheet">

## Example

Here’s a basic example of an informational modal that is being prompted when the following button is clicked:

    <button class="btn btn-primary" id="basicAlert">Basic alert</button>

### Javascript

To initialize the Sweet Alert 2 modal prompt you need to call the `fire` method of the `Swal` object:

    document.getElementById('basicAlert').addEventListener('click', function () {
        Swal.fire(
            'Basic alert',
            'You clicked the button!'
        )
    });

## Alert type

The icon of the modal. SweetAlert2 comes with 5 built-in icon which will show a corresponding icon animation: `warning`, `error`, `success`, `info`, and `question`. It can either be put in the array under the key “icon” or passed as the third parameter of the function.

Here’s an example of `error` type of alert:

    <button class="btn btn-danger" id="errorAlert">Error alert</button>

    document.getElementById('errorAlert').addEventListener('click', function () {
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Something went wrong!',
            footer: '<a href>Why do I have this issue?</a>'
        })
    });

You can read more about the options for this plugin at the official Sweet Alert 2 Documentation.