Guide · Open source
How to use SweetAlert2: install, popups and confirmations
Updated · written with AI from the project's own documentation and checked against our catalogue data
SweetAlert2 is a JavaScript library that replaces the plain browser alert and confirm boxes with styled popups for alerts, confirmations, prompts and toast notifications. This guide is for web developers who want nicer, accessible dialogs without adding extra libraries. After reading it, you will know what the library does, how to get it into a project, and when it is the right choice.
SweetAlert2sweetalert2/sweetalert2 · ★ 18.1k · MIT Install options & downloads Quick start
- 1Read the homepage. Open https://sweetalert2.github.io to find the installation and usage sections.
- 2Get the library. Follow the installation instructions on the homepage, or clone the repository with git clone https://github.com/sweetalert2/sweetalert2.
- 3Add it to your page. Include the library in the front-end code where you need popups, as described in the usage section.
- 4Show a basic alert. Trigger a simple popup using the usage examples before building anything larger.
- 5Add a confirmation. Show a confirmation dialog before any action that deletes or changes data.
- 6Customize and test. Adjust the look to fit your site and test the dialogs with a keyboard and a screen reader.
What SweetAlert2 does and why use it instead of alert()
SweetAlert2 is a front-end library. It shows popup boxes on a web page in place of the browser's built-in alert and confirm dialogs. The README describes it as a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes, with zero dependencies.
The browser's default boxes cannot be styled and look different in every browser. SweetAlert2 gives you a consistent look that adapts to screen size and follows WAI-ARIA accessibility conventions.
- Alerts for showing a message to the user
- Confirmations, for example before deleting data
- Prompts that ask the user for input
- Toast notifications for short, non-blocking messages
Install SweetAlert2 in your project
The README's installation section links to a download guide on the project homepage. The repository's README gives a git clone command for getting the source code. Check the homepage for the recommended way to add the library to your project.
The source does not list any prerequisites for installing it. Because the project is a front-end library, it needs to run in a browser where JavaScript is enabled.
- Project homepage with installation and usage details: https://sweetalert2.github.io
- Clone the repository: git clone https://github.com/sweetalert2/sweetalert2
git clone https://github.com/sweetalert2/sweetalert2Use SweetAlert2 for confirmations before destructive actions
A common use is asking the user to confirm an action that cannot be undone, such as deleting a record. A styled confirmation dialog is clearer than the browser's plain confirm box and can be shown before the code performs the deletion.
The usage section on the homepage documents the options and the calls that build these dialogs. Follow those examples rather than guessing the API.
- Show a confirmation dialog before a delete action
- Run the destructive code only after the user confirms
- Use toasts to confirm that an action succeeded
Use framework wrappers if you use React, Angular or Laravel
The README links to official wrapper projects for several frameworks: sweetalert2-react-content for React, ngx-sweetalert2 for Angular and sweetalert2-laravel for Laravel. Use these if your project is built with one of them.
The README also links to a recipe gallery with example code, which can help when you want to see a finished pattern before writing your own.
- React: github.com/sweetalert2/sweetalert2-react-content
- Angular: github.com/sweetalert2/ngx-sweetalert2
- Laravel: github.com/sweetalert2/sweetalert2-laravel
- Recipe gallery: sweetalert2.github.io/recipe-gallery
Customize the look and check accessibility
The library is customizable, so you can change how the dialogs look and behave to match your site. The analysis for this page notes that prebuilt themes can be matched to frameworks such as Bootstrap or Material UI.
Accessibility is built in through WAI-ARIA conventions. Still, test your own dialogs with a keyboard and a screen reader, since your custom content can affect how accessible the final popup is.
- Pick or adjust a theme to match your design system
- Test dialogs with keyboard navigation
- Check the homepage examples for available customization options
What people use it for
- Replacing a browser confirm box before deleting a user account or record
- Showing a styled success or error message after a form submission
- Asking the user for a value with a prompt dialog
- Displaying short toast notifications that do not block the page
Frequently asked questions
Is SweetAlert2 free to use?
Yes. The repository is licensed under the MIT licence, which the README lists alongside the project details. Check the LICENSE file in the repository for the full terms before using it in a commercial project.
Does SweetAlert2 have dependencies?
The README states that SweetAlert2 has zero dependencies. That means it does not require other libraries to run.
How do I install SweetAlert2?
The README links to an installation section on the project homepage and gives a git clone command for the repository. Use the homepage instructions to add the library to your project.
What is the difference between SweetAlert2 and the browser alert box?
The browser's alert and confirm boxes are plain and cannot be styled. SweetAlert2 provides responsive, customizable popups that follow WAI-ARIA accessibility conventions.
What are the alternatives to SweetAlert2?
The analysis for this page lists Bootstrap Modal, the original SweetAlert, Notiflix and Toastify as comparable projects. Bootstrap Modal may suit projects already using Bootstrap, while Toastify focuses on toast notifications.
Do I need to know how to code to use it?
Yes. SweetAlert2 is a JavaScript library and requires writing code. It is not a no-code tool.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
SweetAlert2 suits web developers who want attractive, accessible popups and confirmation dialogs without extra dependencies, and it is free under the MIT licence. It is not a good fit for non-developers wanting a no-code tool, or for teams that need a dialog system built entirely from scratch.
Install options & downloads