SweetAlert2 - Javascript

SweetAlert2 is a lightweight and customizable alert library for JavaScript. It is the updated version of SweetAlert, which provides a more modern and user-friendly interface.

Features

• Customizable title and message
• Support for custom icons
• Multiple alert types available, including success, error, warning, info, and question
• Support for custom buttons and button texts
• Support for callbacks on alert actions
• Ability to customize the animation

Installation

To use SweetAlert2, you need to include its CSS and JavaScript files in your HTML file. You can download these files from GitHub or use a CDN service.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.5/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.5/dist/sweetalert2.all.min.js"></script>

Usage

After including the required files, you can use SweetAlert2 in your JavaScript code. Here is an example of showing a basic alert message:

Swal.fire('Hello World!');

You can customize the alert by passing an options object:

Swal.fire({
  title: 'Are you sure?',
  text: 'You will not be able to revert this!',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!',
}).then((result) => {
  if (result.isConfirmed) {
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})

This will show a warning alert with a confirmation button and a cancel button. If the confirmation button is clicked, another alert with a success icon will be shown.

Conclusion

In summary, SweetAlert2 is a powerful and customizable alert library for JavaScript that can make your user interface more user-friendly and modern. Its features and ease of use make it a great option for adding alert messages to your website or web application.