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

Become the Ultimate Sponsor of SweetAlert2 and place your banner here
(100K+ unique visitors per month!)

The author of SweetAlert2 (@limonte) is looking for short-term to medium-term working contracts in front-end, preferably OSS.

Examples

Download & install

$ npm install sweetalert2

Or grab from jsdelivr CDN

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>

Usage

1. Initialize the plugin by referencing the necessary files:

<script src="sweetalert2.all.min.js"></script>
<!-- Optional: include a polyfill for ES6 Promises for IE11 -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></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.

[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, "text" 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)
footer
''
The footer of the popup. Can be either plain text or HTML.
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
undefined
Popup window width, including paddings (box-sizing: border-box). Can be in px or %. The default width is 32rem.
padding
undefined
Popup window padding. The default padding is 1.25rem.
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: '...',
  input: '...',
  validationMessage: '...',
  actions: '...',
  confirmButton: '...',
  denyButton: '...',
  cancelButton: '...',
  loader: '...',
  footer: '....'
}
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.
animation
true
Deprecated and will be removed in the next major release, use showClass and hideClass instead:
Swal.fire({
  ...,
  showClass: {
    popup: 'swal2-noanimation',
    backdrop: 'swal2-noanimation'
  },
  hideClass: {
    popup: '',
    backdrop: ''
  }
})

If set to false, popup CSS animation will be disabled.
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.
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 that something is loading. Use it in combination with the preConfirm 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 in px.
imageHeight
undefined
Custom image height in px.
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, see usage example.
currentProgressStep
undefined
Current active progress step. The default is Swal.getQueueStep()
progressStepsDistance
undefined
Distance between progress steps.
willOpen
undefined
Popup lifecycle hook. Synchronously runs before the popup is shown on screen. Provides popup DOM element as the argument.
onBeforeOpen Deprecated, use willOpen instead
didOpen
undefined
Popup lifecycle hook. Asynchronously runs after the popup has been shown on screen. Provides popup DOM element as the argument.
onOpen
Deprecated, use didOpen instead
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.
onRender Deprecated, use didRender instead
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.
onClose Deprecated, use willClose instead
didClose
undefined
Popup lifecycle hook. Asynchronously runs after the popup has been disposed by user interaction (and not due to another popup being fired).
onAfterClose
Deprecated, use didClose instead
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.
onDestroy
Deprecated, use didDestroy instead

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

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

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.
Swal.getHeader() Get the popup header. The header contains progress steps, the icon, the image, the title, and the close button.
Swal.getTitle() Get the popup title.
Swal.getProgressSteps() Get the progress steps.
Swal.getCloseButton() Get the close button.
Swal.getContent() Get the popup content.
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.queue([Array]) Provide array of SweetAlert2 parameters to show multiple popups, one popup after another. See usage example
Swal.getQueueStep() Get the index of current popup in queue. When there's no active queue, null will be returned.
Swal.insertQueueStep() Insert a popup to queue, you can specify popup positioning with second parameter. By default a popup will be added to the end of a queue.
Swal.deleteQueueStep(index) Delete a popup at index from queue.
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@10/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';

Collaborators


@gverni

@zenflow

@toverux

Donations

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

PayPal
GitHub Sponsors
Cryptocurrencies
Hall of Donators 🏆

Sponsors

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


Become a sponsor
FlowCrypt
FlowCrypt
Code Rubik
Code Rubik
NDCHost
NDCHost
Zilla Themes
Zilla Themes
Tiago de Oliveira Stutz
Tiago de Oliveira Stutz
SebaEBC
SebaEBC

NSFW Sponsors


Joy Love Dolls

Twerking Butt

STED

Sextopedia

My Sex Toy Guide

Best Blowjob
Machines

YourDoll

STC
RealSexDoll
RealSexDoll
DoctorClimax
DoctorClimax

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!