How to Create Customizable Alerts in JavaScript ?

Alerts in JavaScript are an important components in web design. They are commonly used to notify users. The SweetAlert2 library aims to make basic looking alerts much more attractive and also provide context to the alert. The documentation and usage examples of SweetAlert2 could be found here.

Installation: The SweetAlert2 library can be included by using the following CDN link:

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

Example 1:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Sweet Alert2</title>
  
    <!-- Include the library -->
    <script src=
    </script>
</head>
  
<body>
    <h1>
        Sweet Alert2 HTML Page
    </h1>
      
    <script type="text/javascript">
  
        // Make a simple alert
        // with the given text
        Swal.fire(
            'Hey!',
            'Welcome to GeeksForGeeks',
            'success'
        );
    </script>
</body>
  
</html>

chevron_right


Output:



Example 2: This example shows the use of this library for a like button.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Sweet Alert3</title>
  
    <!-- Include the library -->
    <script src=
    </script>
  
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1>
        Sweet Alert3 HTML Page
    </h1>
  
    <script type="text/javascript">
  
        // Show a more complex alert with
        // the given text and properties
        Swal.fire({
  
            // Specify the title
            // of the alert
            title:
'<strong>Hit the Like Button at GeeksForGeeks</strong>',
            html: '',
  
            // Show a close button
            showCloseButton: true,
            focusConfirm: false,
  
            // Specify the text 
            // for the button
            confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Great!',
            confirmButtonAriaLabel: 
                'Thumbs up, great!',
        })
    </script>
</body>
  
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.