πŸ‡ΊπŸ‡¦ STOP WAR IN UKRAINE πŸ‡ΊπŸ‡¦
SweetAlert2

A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes

Zero dependencies

Current version: ● Latest update: ● Downloads last month:
Normal alert

    
SweetAlert2

  

Get $100 in free credits with DigitalOcean!

Examples

Download & install

$ npm install sweetalert2

Or grab from jsdelivr CDN

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

Usage

1. Initialize the plugin by referencing the necessary files:

<script src="sweetalert2.all.min.js"></script>

You can also include the stylesheet separately if desired:

<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.css">

Or

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'

// CommonJS
const Swal = require('sweetalert2')

It's possible to import JS and CSS separately, e.g. if you need to customize styles:

import Swal from 'sweetalert2/dist/sweetalert2.js'

import 'sweetalert2/src/sweetalert2.scss'

2. Call the sweetAlert2-function after the page has loaded

Swal.fire({
  title: 'Error!',
  text: 'Do you want to continue',
  icon: 'error',
  confirmButtonText: 'Cool'
})

Integrations with major JS frameworks

React
Vue
Angular

Configuration

Here are the keys that you can use if you pass an object into sweetAlert2:

Argument
(Default value)
Description

title


''
The title of the popup, as HTML.

titleText


''
The title of the popup, as text. Useful to avoid HTML injection.

html


''
A HTML description for the popup.
If text and html parameters are provided in the same time, html will be used.
[Security] SweetAlert2 does NOT sanitize this parameter. It is the developer's responsibility to escape any user input when using the html option, so XSS attacks would be prevented.

text


''
A description for the popup.
If text and html parameters are provided in the same time, html will be used.

icon


undefined
The icon of the popup. SweetAlert2 comes with 5 built-in icon which will show a corresponding icon animation: warning, error, success, info, and question. It can either be put in the array under the key "icon" or passed as the third parameter of the function.

iconColor


undefined
Use this to change the color of the icon.

iconHtml


undefined
The custom HTML content for an icon.

showClass


{
  popup: 'swal2-show',
  backdrop: 'swal2-backdrop-show',
  icon: 'swal2-icon-show'
}
CSS classes for animations when showing a popup (fade in)

hideClass


{
  popup: 'swal2-hide',
  backdrop: 'swal2-backdrop-hide',
  icon: 'swal2-icon-hide'
}
CSS classes for animations when hiding a popup (fade out)

backdrop


true
Whether or not SweetAlert2 should show a full screen click-to-dismiss backdrop. Can be either a boolean or a string which will be assigned to the CSS background property.

toast


false
Whether or not an alert should be treated as a toast notification. This option is normally coupled with the position parameter and a timer. Toasts are NEVER autofocused.

target


'body'
The container element for adding popup into.

input


undefined
Input field type, can be text, email, password, number, tel, range, textarea, select, radio, checkbox, file and url.

width


'32em'
Popup window width, including paddings (box-sizing: border-box). Can be in any CSS unit (px, em/rem, %).

padding


'0 0 1.25em'
Popup window padding. Can be in any CSS unit (px, em/rem, %).

color


undefined
Color for title, content and footer (CSS color property). The default color is '#545454'.

background


undefined
Popup window background (CSS background property). The default background is '#fff'.

position


'center'
Popup window position, can be 'top', 'top-start', 'top-end', 'center', 'center-start', 'center-end', 'bottom', 'bottom-start', or 'bottom-end'.

grow


false
Paired with window position, sets the direction the popup should grow in, can be set to 'row', 'column', 'fullscreen', or false.

customClass


undefined
A custom CSS class for the popup:
customClass: {
  container: '...',
  popup: '...',
  header: '...',
  title: '...',
  closeButton: '...',
  icon: '...',
  image: '...',
  content: '...',
  htmlContainer: '...',
  input: '...',
  inputLabel: '...',
  validationMessage: '...',
  actions: '...',
  confirmButton: '...',
  denyButton: '...',
  cancelButton: '...',
  loader: '...',
  footer: '....',
  timerProgressBar: '....',
}

timer


undefined
Auto close timer of the popup. Set in ms (milliseconds). See also Swal.getTimerLeft(), Swal.stopTimer(), Swal.resumeTimer(), Swal.toggleTimer(), Swal.isTimerRunning() and Swal.increaseTimer().

timerProgressBar


false
If set to true, the timer will have a progress bar at the bottom of a popup. Mostly, this feature is useful with toasts.

heightAuto


true
By default, SweetAlert2 sets html's and body's CSS height to auto !important. If this behavior isn't compatible with your project's layout, set heightAuto to false.

allowOutsideClick


true
If set to false, the user can't dismiss the popup by clicking outside it.
You can also pass a custom function returning a boolean value, e.g. if you want to disable outside clicks for the loading state of a popup.

allowEscapeKey


true
If set to false, the user can't dismiss the popup by pressing the Esc key. You can also pass a custom function returning a boolean value, e.g. if you want to disable the Esc key for the loading state of a popup.

allowEnterKey


true
If set to false, the user can't confirm the popup by pressing the Enter or Space keys, unless they manually focus the confirm button. You can also pass a custom function returning a boolean value.

stopKeydownPropagation


true
If set to false, SweetAlert2 will allow keydown events propagation to the document.

keydownListenerCapture


false
Useful for those who are using SweetAlert2 along with Bootstrap modals. By default keydownListenerCapture is false which means when a user hits Esc, both SweetAlert2 and Bootstrap modals will be closed. Set keydownListenerCapture to true to fix that behavior.

showConfirmButton


true
If set to false, a "Confirm"-button will not be shown.

showDenyButton


false
If set to true, a "Deny"-button will be shown. It can be useful when you want a popup with 3 buttons.

showCancelButton


false
If set to true, a "Cancel"-button will be shown, which the user can click on to dismiss the modal.

confirmButtonText


'OK'
Use this to change the text on the "Confirm"-button.

denyButtonText


'No'
Use this to change the text on the "Deny"-button.

cancelButtonText


'Cancel'
Use this to change the text on the "Cancel"-button.

confirmButtonColor


undefined
Use this to change the background color of the "Confirm"-button. The default color is #3085d6

denyButtonColor


undefined
Use this to change the background color of the "Deny"-button. The default color is #dd6b55

cancelButtonColor


undefined
Use this to change the background color of the "Cancel"-button. The default color is #aaa

confirmButtonAriaLabel


''
Use this to change the aria-label for the "Confirm"-button.

denyButtonAriaLabel


''
Use this to change the aria-label for the "Deny"-button.

cancelButtonAriaLabel


''
Use this to change the aria-label for the "Cancel"-button.

buttonsStyling


true
Apply default styling to buttons. If you want to use your own classes (e.g. Bootstrap classes) set this parameter to false.

reverseButtons


false
Set to true if you want to invert default buttons positions ("Confirm"-button on the right side).

focusConfirm


true
Set to false if you want to focus the first element in tab order instead of "Confirm"-button by default.

returnFocus


true
Set to false if you don't want to return the focus to the element that invoked the modal after the modal is closed.

focusDeny


false
Set to true if you want to focus the "Deny"-button by default.

focusCancel


false
Set to true if you want to focus the "Cancel"-button by default.

showCloseButton


false
Set to true to show close button in top right corner of the popup.

closeButtonHtml


'&times;'
Use this to change the content of the close button.

closeButtonAriaLabel


'Close this dialog'
Use this to change the aria-label for the close button.

loaderHtml


''
Use this to change the HTML content of the loader.

showLoaderOnConfirm


false
Set to true to disable buttons and show the loader instead of the Confirm button. Use it in combination with the preConfirm parameter.

showLoaderOnDeny


false
Set to true to disable buttons and show the loader instead of the Deny button. Use it in combination with the preDeny parameter.

scrollbarPadding


true
Set to false to disable body padding adjustment when the page scrollbar gets hidden while the popup is shown

preConfirm


undefined
Function to execute before confirming, may be async (Promise-returning) or sync.
Returned (or resolved) value can be:
  • false to prevent a popup from closing
  • anything else to pass that value as the result.value of Swal.fire()
  • undefined to keep the default result.value
See usage example.

preDeny


undefined
Function to execute before denying, may be async (Promise-returning) or sync.
Returned (or resolved) value can be:
  • false to prevent a popup from closing
  • anything else to pass that value as the result.value of Swal.fire()
  • undefined to keep the default result.value

returnInputValueOnDeny


false
If you want to return the input value as result.value when denying the popup, set to true. Otherwise, the denying will set result.value to false.

imageUrl


undefined
Add a customized icon for the popup. Should contain a string with the path or URL to the image.

imageWidth


undefined
If imageUrl is set, you can specify imageWidth to describes image width. Can be in any CSS unit (px, em/rem, %).

imageHeight


undefined
Custom image height. Can be in any CSS unit (px, em/rem, %).

imageAlt


''
An alternative text for the custom image icon.

inputLabel


''
Input field label.

inputPlaceholder


''
Input field placeholder.

inputValue


''
Input field initial value.

If the input type is

select

,

inputValue

will represent the selected

<option>

tag.

If the input type is

checkbox

,

inputValue

will represent the

checked

state.

If the input type is

text

,

email

,

number

,

tel

or

textarea

a Promise can be accepted as

inputValue

.

inputOptions


{}
If input parameter is set to "select" or "radio", you can provide options. Can be a Map or a plain object, with keys that represent option values and values that represent option text. You can also provide plain object or Map as values that will represented a group of options, being the label of this <optgroup> the key. Finally, you can also provide a Promise that resolves with one of those types.

inputAutoTrim


true
Automatically remove whitespaces from both ends of a result string. Set this parameter to false to disable auto-trimming.

inputAttributes


{}
HTML input attributes (e.g. min, max, autocomplete, accept), that are added to the input field. Object keys will represent attributes names, object values will represent attributes values.

inputValidator


undefined
Validator for input field, may be async (Promise-returning) or sync.
Returned (or resolved) value can be:
  • a falsy value (undefined, null, false) for indicating success
  • a string value (error message) for indicating failure
See usage example.

validationMessage


undefined
A custom validation message for default validators (email, url).

progressSteps


[]
Progress steps, useful for queues.

currentProgressStep


undefined
Current active progress step.

progressStepsDistance


undefined
Distance between progress steps. Can be in any CSS unit (px, em/rem, %).

willOpen


undefined
Popup lifecycle hook. Synchronously runs before the popup is shown on screen. Provides popup DOM element as the argument.

didOpen


undefined
Popup lifecycle hook. Asynchronously runs after the popup has been shown on screen. Provides popup DOM element as the argument.

didRender


undefined
Popup lifecycle hook. Synchronously runs after the popup DOM has been updated (ie. just before the popup is repainted on the screen).
Provides popup DOM element as the argument.
Typically, this will happen after Swal.fire() or Swal.update().
If you want to perform changes in the popup's DOM, that survive Swal.update(), prefer didRender over willOpen.

willClose


undefined
Popup lifecycle hook. Synchronously runs when the popup closes by user interaction (and not due to another popup being fired). Provides popup DOM element as the argument.

didClose


undefined
Popup lifecycle hook. Asynchronously runs after the popup has been disposed by user interaction (and not due to another popup being fired).

didDestroy


undefined
Popup lifecycle hook. Synchronously runs after popup has been destroyed either by user interaction or by another popup.
If you have cleanup operations that you need to reliably execute each time a popup is closed, prefer didDestroy over didClose.

You can easily reuse configuration by creating your own Swal with Swal.mixin({ ...options }):

Declarative templates and declarative triggering

There's also the declarative way to define a popup, via the <template> tag. This is handy when you want to define popup on server side (SSR).

Supported template elements:

<swal-title>...</swal-title>
<swal-html>...</swal-html>
<swal-footer>...</swal-footer>
<swal-param name="..." value="..." />
<swal-button type="..." color="..." aria-label="...">...</swal-button>
<swal-image src="..." width="..." height="..." alt="..." />
<swal-icon type="..." color="...">...</swal-icon>
<swal-input type="..." label="..." placeholder="..." value="..." />
<swal-input-option value="...">...</swal-input-option>

And you can even trigger SweetAlert2 popups declaratively! Use the bindClickHandler() method for that:

Handling Buttons (Confirm, Deny, Cancel)

When the user clicks a button, the Promise returned by Swal.fire() will be resolved with the SweetAlertResult object:

Key Description
isConfirmed The "Confirm" button was clicked, the value will contain the result
isDenied The "Deny" button was clicked, the value will be false.
Alternatively, if there's an input in a popup, you can use returnInputValueOnDeny: true to return the input's value.
isDismissed The "Cancel" button was clicked, the dismiss will be Swal.DismissReason.cancel
value The value from the popup, possible values:
  • true for simple confirmed dialogs
  • false for denied popups
  • any value for popups with inputs
dismiss The dismissal reason, see the Handling Dismissals section for details

Handling Dismissals

When an alert is dismissed by the user, the Promise returned by Swal.fire() will be resolved with an object { isDismissed: true, dismiss: reason } documenting the reason it was dismissed:

Reason Description Related configuration

Swal.DismissReason.backdrop

The user clicked the backdrop. allowOutsideClick

Swal.DismissReason.cancel

The user clicked the cancel button. showCancelButton

Swal.DismissReason.close

The user clicked the close button. showCloseButton

Swal.DismissReason.esc

The user clicked the Esc key. allowEscapeKey

Swal.DismissReason.timer

The timer ran out, and the alert closed automatically. timer

If a popup is dismissed by Swal.close(), the Promise will be resolved with an object { isDismissed: true } (dismiss will be undefined).

Icons

Input Types

text


      

email


      

url


      

password


      

textarea


      

select


      

radio


      

checkbox


      

file


      

range


      

Multiple inputs aren't supported, you can achieve them by using html and preConfirm parameters.
Inside the preConfirm() function you can return (or, if async, resolve with) the custom result:


      

Methods

Method Description

Swal.isVisible()

Determine if popup is shown.

Swal.mixin({ ...options })

Returns an extended version of Swal containing params as defaults. Useful for reusing Swal configuration.

Swal.update({ ...options })

Updates popup options.

Swal.close()

Close the currently open SweetAlert2 popup programmatically, the Promise returned by Swal.fire() will be resolved with an empty object { }

Swal.getContainer()

Get the popup container which contains the backdrop and the popup itself.

Swal.getTitle()

Get the popup title.

Swal.getProgressSteps()

Get the progress steps.

Swal.getCloseButton()

Get the close button.

Swal.getIcon()

Get the icon.

Swal.getHtmlContainer()

Gets the DOM element where the html/text parameter is rendered to.

Swal.getImage()

Get the image.

Swal.getActions()

Get the actions block (buttons container).

Swal.getFooter()

Get the popup footer.

Swal.getFocusableElements()

Get all focusable elements in the popup.

Swal.getConfirmButton()

Get the "Confirm" button.

Swal.getDenyButton()

Get the "Deny" button.

Swal.getCancelButton()

Get the "Cancel" button.

Swal.enableButtons()

Enable "Confirm" and "Cancel" buttons.

Swal.disableButtons()

Disable "Confirm" and "Cancel" buttons.

Swal.showLoading()

Shows loader (spinner), this is useful with AJAX requests.

By default the loader be shown instead of the "Confirm" button, but if you want another button to be replaced with a loader, just pass it like this: Swal.showLoading(Swal.getDenyButton())

Swal.hideLoading()

Hides loader and shows back the button which was hidden by .showLoading()

Swal.isLoading()

Determine if popup is in the loading state. Related methods: Swal.showLoading() and Swal.hideLoading()

Swal.getTimerLeft()

Returns the time left in case when timer parameter is set.

Swal.stopTimer()

Stops the timer in case when timer parameter is set. Returns the time left

Swal.resumeTimer()

Resume the timer previously stopped. Returns the time left

Swal.toggleTimer()

Toggle state of the timer between stopped and running. Returns the time left

Swal.isTimerRunning()

Returns the status of a timer: true if is running, false if it's paused

Swal.increaseTimer(n)

Increase the timer by n milliseconds. Returns the time left

Swal.clickConfirm()

Click the "Confirm"-button programmatically.

Swal.clickDeny()

Click the "Deny"-button programmatically.

Swal.clickCancel()

Click the "Cancel"-button programmatically.

Swal.getInput()

Get the input DOM node, this method works with input parameter.

Swal.disableInput()

Disable input. A disabled input element is unusable and un-clickable.

Swal.enableInput()

Enable input.

Swal.showValidationMessage(message)

Show the validation message DOM node.

Swal.resetValidationMessage()

Hide the validation message DOM node.

Swal.getValidationMessage()

Get the validation message DOM node.

Swal.isValidParameter(param)

Determine if parameter name is valid.

Swal.isUpdatableParameter(param)

Determine if parameter name is valid for Swal.update() method.

Themes


Dark


theme dark

Minimal


theme minimal

Borderless


theme borderless

Bootstrap 4


theme bootstrap 4

Bulma


theme bulma

Material UI


theme material ui

WordPress Admin


theme material ui

Themes Installation

You can install all themes at once:

$ npm install @sweetalert2/themes

Or just a single theme @sweetalert2/theme-<theme_name>, e.g.:

$ npm install @sweetalert2/theme-dark

Or from jsdelivr CDN, e.g.:

<link href="//cdn.jsdelivr.net/npm/@sweetalert2/theme-dark@4/dark.css" rel="stylesheet">
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.js"></script>

Themes Usage

With CSS:

<!-- Include a required theme -->
<link rel="stylesheet" href="@sweetalert2/themes/dark/dark.css">
<script src="sweetalert2/dist/sweetalert2.min.js"></script>

With SASS:

// your-app.js
import Swal from 'sweetalert2/src/sweetalert2.js'

// your-app.scss
@import '~@sweetalert2/themes/dark/dark.scss';

Donations

Has SweetAlert2 helped you create an amazing application?
You can show your support by making a donation:

PayPal
GitHub Sponsors
Revolut
Cryptocurrencies
Hall of Donators πŸ†

Sponsors

For all questions related to sponsorship please contact me via email limon.monte@protonmail.com


Become a sponsor

iStarTips
iStarTips
EvGuru Home & Commercial EV Chargers
EvGuru Home & Commercial EV Chargers
Best For Android
Best For Android
FlowCrypt
FlowCrypt
Metal Raised Garden Bed
Metal Raised Garden Bed
Pure Essential Oil
Pure Essential Oil
Phone Tracking Apps
Phone Tracking Apps
My Bitcoin slots
My Bitcoin slots
TorcStark
TorcStark
Code Rubik
Code Rubik
Halvin Laina
Halvin Laina
Tiago de Oliveira Stutz
Tiago de Oliveira Stutz

NSFW Sponsors

For all questions related to sponsorship please contact me via email limon.monte@protonmail.com


Become a sponsor

Sexy Sex Doll
Sexy Sex Doll
Cheap Sex Doll
Cheap Sex Doll
Sex Vibrators
Sex Vibrators
Viva Awa
Viva Awa
Sensual Dolls
Sensual Dolls
BestRealDoll
BestRealDoll
SexDollTech
SexDollTech
Rose Wives
Rose Wives
VSDoll
VSDoll
YourDoll
SexDollsOff
YourDoll
RealSexDoll
YourDoll
YourDoll
Annie's Dollhouse
Annie's Dollhouse
Sex Doll Center
Sex Doll Center
SexAngelbaby
SexAngelbaby
The Adult Toy Finder
The Adult Toy Finder
My Sex Toy Guide
My Sex Toy Guide
Best Blowjob Machines
Best Blowjob
Machines
STC
STC
DoctorClimax
DoctorClimax
BedBible
BedBible

Or, click the banner at the top of this page. We show high-quality tech ads via Carbon.
Ads injected into examples are only shown on this page, they are not the part of SweetAlert2's codebase and you will not have them when using SweetAlert2 for your projects.

Contribute

Feel free to fork SweetAlert2 on GitHub if you have any features that you want to add!