Guide · Open source

How to use SweetAlert: install and show popup dialogs

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

SweetAlert is a JavaScript library that shows styled popup dialogs on a web page in place of the built-in browser alert box. You call it with a title, text or an icon, and it can also ask the user to confirm an action or type a value. This guide shows you how to install it, how to call it, and how to get the user's answer back as a promise.

SweetAlertt4t5/sweetalert · ★ 22.2k · MIT Install options & downloads

Quick start

1Check prerequisites. Confirm that Node.js and npm, or another JavaScript package manager, are installed on your machine.
2Install the package. Run npm install --save sweetalert in your project folder.
3Import SweetAlert. Add import swal from 'sweetalert'; at the top of the JavaScript file where you want the popup.
4Show a simple popup. Call swal with a message string to display a styled modal in place of the browser alert.
5Add a confirmation. Pass an options object with a title, text, icon set to warning and dangerMode set to true, then check the returned value.
6Read user input. Set content to input and use the value returned by the promise or await call.

Install SweetAlert with npm

SweetAlert is installed through a JavaScript package manager. You need Node.js and npm, or another JavaScript package manager, on your machine. The README gives this command to add it to your project.

Make sure Node.js and npm are installed before you start.
Run the install command from your project folder.

npm install --save sweetalert

Import the library in your JavaScript file and call it with a message. The README uses the name swal for the imported function.

The single-argument form shows a popup with that text, which replaces the plain alert box.

import swal from 'sweetalert';

swal("Hello world!");

Show an error or warning message

When you pass three arguments, the first is the title, the second is the text and the third is the icon. The README shows an error example using the icon value "error".

For a warning that asks the user to confirm a risky action, pass an options object with a title, text, icon set to "warning" and dangerMode set to true.

Pass a title, text and icon as positional arguments for a quick message.
Use an options object when you need more settings, such as icon and dangerMode.

swal("Oops!", "Something went wrong!", "error");

Ask for confirmation and read the answer

Confirmation dialogs return a value you can check. With promises, the .then callback receives true or false. With async/await, you await the call and check the returned value.

The README uses this pattern before a delete or leave-page action, where you only continue if the user agrees.

Promise style: call .then and check the value in the callback.
Async/await style: use const willDelete = await swal({...}) and check it in an if statement.

const willDelete = await swal({
  title: "Are you sure?",
  text: "Are you sure that you want to delete this file?",
  icon: "warning",
  dangerMode: true,
});

if (willDelete) {
  swal("Deleted!", "Your imaginary file has been deleted!", "success");
}

Get text input from a prompt

Set content to "input" to turn the modal into a prompt. The promise or awaited value then holds the text the user typed.

You can pass the result to another popup or to any other code in your page.

const value = await swal("Type something:", {
  content: "input",
});

swal(`You typed: ${value}`);

Use SweetAlert with React

The README says SweetAlert has tools for integrating with rendering libraries. For React, it points to a separate package, @sweetalert/with-react, which you install in addition to the main library. It lets you pass JSX to the alert.

If your project is not React-based, you do not need this package.

import React from 'react'
import swal from '@sweetalert/with-react'

swal(
  <div>
    <h1>Hello world!</h1>
    <p>
      This is now rendered with JSX!
    </p>
  </div>
)

What people use it for

Asking for a yes/no confirmation before a user deletes a file.
Warning a user before they leave a page.
Showing a success or error message after a form submission.
Prompting for a short text value in a modal.
Showing a message after a fetch request, such as an error if the request fails.

Frequently asked questions

Is SweetAlert free to use?

SweetAlert is released under the MIT licence, as stated in the project's metadata. Check the LICENSE file in the repository for the full terms before you use it in your project.

What do I need to install SweetAlert?

The README lists Node.js and npm, or another JavaScript package manager, as prerequisites. You install the library with npm install --save sweetalert.

How do I get the user's answer from a SweetAlert confirm dialog?

Use the promise returned by swal. In a .then callback, or after an await, the value tells you whether the user confirmed. The README examples check this value in an if statement before running the next step.

Can SweetAlert show a text input box?

Yes. Pass content set to "input" in the options object. The value the user types is returned through the promise or the awaited call.

Does SweetAlert work with React?

The main library is plain JavaScript. For React, the README points to a separate package, @sweetalert/with-react, which lets you pass JSX into the alert.

What are the alternatives to SweetAlert?

The project's comparable projects list includes SweetAlert2, Notiflix, Bootbox and Toastify. Compare them on the features you need, such as dialog types or toast notifications, and on how recently each one was updated.

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

SweetAlert suits web developers who use npm and want nicer alert and confirm popups with a simple promise-based API. It is less suited to people who do not write code, to React-first teams who want a native component model, or to teams that need guaranteed active maintenance, since the provided metadata shows the last push in April 2023. For those cases, compare it with SweetAlert2, Notiflix, Bootbox or Toastify.

Install options & downloads