SweetAlert2

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)
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 '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: '...', 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 '×'	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.
inputAutoFocus true	Automatically focus the input when popup is shown. Set this parameter to false to disable auto-focusing.
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-function-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:

Icons

Input Types

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

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

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.getPopup()	Get the popup.
Swal.getTitle()	Get the popup title.
Swal.getProgressSteps()	Get the progress steps.
Swal.getCloseButton()	Get the close button.
Swal.getIcon()	Get the icon.
Swal.getIconContent()	Get the icon content (without border).
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

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:

success
error
warning	!
info	i
question	?

Examples

Download & install

Usage

Integrations with major JS frameworks

Configuration

title

titleText

html

text

icon

iconColor

iconHtml

showClass

hideClass

footer

backdrop

toast

target

input

width

padding

color

background

position

grow

customClass

timer

timerProgressBar

heightAuto

allowOutsideClick

allowEscapeKey

allowEnterKey

stopKeydownPropagation

keydownListenerCapture

showConfirmButton

showDenyButton

showCancelButton

confirmButtonText

denyButtonText

cancelButtonText

confirmButtonColor

denyButtonColor

cancelButtonColor

confirmButtonAriaLabel

denyButtonAriaLabel

cancelButtonAriaLabel

buttonsStyling

reverseButtons

focusConfirm

returnFocus

focusDeny

focusCancel

showCloseButton

closeButtonHtml

closeButtonAriaLabel

loaderHtml

showLoaderOnConfirm

showLoaderOnDeny

scrollbarPadding

preConfirm

preDeny

returnInputValueOnDeny

imageUrl

imageWidth

imageHeight

imageAlt

inputLabel

inputPlaceholder

inputValue

select

inputValue

<option>

checkbox

inputValue

checked

text

email

number

tel

textarea