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
<!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> |
Output:
Example 2: This example shows the use of this library for a like button.
HTML
<!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> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
