How to Create Customizable Alerts in JavaScript ? Last Updated : 25 Jun, 2020 Comments Improve Suggest changes Like Article Like Report 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= "https://cdn.jsdelivr.net/npm/sweetalert2@9"> </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= "https://cdn.jsdelivr.net/npm/sweetalert2@9"> </script> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </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: Comment More infoAdvertise with us Next Article How to Create Customizable Alerts in JavaScript ? I IshjotSingh97 Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Create an Alert in JavaScript ? The alert() method in JavaScript displays an alert box with a message and an OK button. It's used when you want information to come through to the user, providing immediate notifications or prompts for user interaction during program execution. Note: Alert boxes interrupt user interaction, shifting 1 min read How to create custom errors in JavaScript ? In this article, we will learn to create custom errors with some examples. Errors represent the state of being wrong in condition. Javascript handles a predefined set of errors by itself but if you want to create your own error handling mechanism you can do that with custom errors functionality avai 2 min read How to Create a Custom Callback in JavaScript? A callback is a function that executes after another function has been completed in JavaScript. As an event-driven language, JavaScript does not pause for a function to finish before moving on to the next task. Callbacks enable the execution of a function only after the completion of another, making 3 min read How to Design a Custom Alert Box using JavaScript ? An alert box is a built-in feature in JavaScript that displays a small window with a message to the user. It's primarily used for providing information to the user, displaying warnings, or prompting the user for confirmation. The below approaches can be used to create a custom alert box in JavaScrip 4 min read How to Change the Color of the Alert Box in JavaScript ? An alert box is a dialogue box that pops up on the screen to provide information to the user. It contains a message and an OK button, which allow users to acknowledge the message and close the box. Alert boxes are commonly used in web development to display important messages, warnings, or notificat 5 min read Like