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

Argument

(Default value) Description

title

'' The title of the modal, as HTML. It can either be added to the object under the key "title" or passed as the first parameter of the function.

titleText

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

html

'' A HTML description for the modal. It can either be added to the object under the key "html" or passed as the second parameter of the function.

text

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

icon

undefined The icon of the modal. 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 modal. 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 modal into.

input

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

width

undefined Modal window width, including paddings (box-sizing: border-box). Can be in px or %. The default width is 32rem.

padding

undefined Modal window padding. The default padding is 1.25rem.

background

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

position

'center' Modal 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 modal should grow in, can be set to 'row', 'column', 'fullscreen', or false.

customClass

undefined A custom CSS class for the modal: customClass: { container: 'container-class', popup: 'popup-class', header: 'header-class', title: 'title-class', closeButton: 'close-button-class', icon: 'icon-class', image: 'image-class', content: 'content-class', input: 'input-class', actions: 'actions-class', confirmButton: 'confirm-button-class', denyButton: 'confirm-button-class', cancelButton: 'cancel-button-class', footer: 'footer-class' }

timer

undefined Auto close timer of the modal. 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, modal 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 modal 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 modal.

allowEscapeKey

true If set to false, the user can't dismiss the modal 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 modal.

allowEnterKey

true If set to false, the user can't confirm the modal 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 modal.

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 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 modal is shown

preConfirm

undefined Function to execute before confirm, may be async (Promise-returning) or sync.

Returned (or resolved) value can be: false to prevent a popup from closing

to prevent a popup from closing anything else to pass that value as the result.value of Swal.fire()

of undefined to keep the default result.value See usage example.

imageUrl

undefined Add a customized icon for the modal. 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.

inputPlaceholder

'' Input field placeholder.

inputValue

'' Input field initial value.



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

value ( , , ) for indicating 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 modal queues, see usage example.

currentProgressStep

undefined Current active progress step. The default is Swal.getQueueStep()

progressStepsDistance

'40px' Distance between progress steps.

onBeforeOpen

undefined Function to run when modal built, but not shown yet. Provides modal DOM element as the first argument.

onOpen

undefined Function to run when modal opens, provides modal DOM element as the first argument.

onRender

undefined Function to run after modal DOM has been updated. Typically, this will happen after Swal.fire() or Swal.update(). If you want to perform changes in the modal's DOM, that survive Swal.update(), onRender is a good place for that.

onClose

undefined Function to run when modal closes by user interaction (and not by another popup), provides modal DOM element as the first argument.

onAfterClose

undefined Function to run after popup has been disposed by user interaction (and not by another popup).