Configuration
-
textType:
stringDefault:
""(empty string)Description:
The modal's text. It can either be added as a configuration under the key
text(as in the example below), or passed as the first and only parameter (e.g.swal("Hello world!")), or the second one if you have multiple string parameters (e.g.swal("A title", "Hello world!")).Example:
;
-
titleType:
stringDefault:
""(empty string)Description:
The title of the modal. It can either be added as a configuration under the key
title(as in the example below), or passed as the first string parameter – as long as it's not the only one – of theswalfunction (e.g.swal("Here's a title!", "Here's some text")).Example:
;
-
iconType:
stringDefault:
""(empty string)Description:
An icon for the modal. SweetAlert comes with 4 built-in icons that you can use:
"warning""error""success""info"
It can either be added as a configuration under the key
icon, or passed as the third string parameter of theswalfunction (e.g.swal("Title", "Text", "success")).Example:
;
-
buttonType:
string|boolean|ButtonOptionsDefault:
text: "OK"value: truevisible: trueclassName: ""closeModal: trueDescription:
The confirm button that's shown by default. You can change its text by setting
buttonto a string, or you can tweak more setting by passing aButtonOptionsobject. Setting it tofalsehides the button.Examples:
;;;
-
buttonsType:
boolean|string[]|ButtonOptions[]|ButtonListDefault:
cancel:text: "Cancel"value: nullvisible: falseclassName: ""closeModal: trueconfirm:text: "OK"value: truevisible: trueclassName: ""closeModal: trueDescription:
Specify the exact amount of buttons and their behaviour. If you use an array, you can set the elements as strings (to set only the text), a list of
ButtonOptions, or a combination of both. You can also set one of the elements totrueto simply get the default options.If you want more than just the predefined cancel and confirm buttons, you need to specify a
ButtonListobject, with keys (the button's namespace) pointing toButtonOptions.You can also specify
falseto hide all buttons (same behaviour as thebuttonoption).Examples:
;;;;;
-
contentType:
Node|stringDefault:
nullDescription:
For custom content, beyond just text and icons.
Examples:
;;var slider = document;slidertype = "range";;
-
classNameType:
stringDefault:
""(empty string)Description:
Add a custom class to the SweetAlert modal. This is handy for changing the appearance.
Example:
; -
closeOnClickOutsideType:
booleanDefault:
trueDescription:
Decide whether the user should be able to dismiss the modal by clicking outside of it, or not.
Example:
; -
closeOnEscType:
booleanDefault:
trueDescription:
Decide whether the user should be able to dismiss the modal by hitting the ESC key, or not.
Example:
;
-
dangerModeType:
booleanDefault:
falseDescription:
If set to
true, the confirm button turns red and the default focus is set on the cancel button instead. This is handy when showing warning modals where the confirm action is dangerous (e.g. deleting an item).Example:
;
-
timerType:
numberDefault:
nullDescription:
Closes the modal after a certain amount of time (specified in ms). Useful to combine with
buttons: false.Example:
;
Methods
| Name | Description | Example |
|---|---|---|
close |
Closes the currently open SweetAlert, as if you pressed the cancel button. | swal.close() |
getState |
Get the state of the current SweetAlert modal. | swal.getState() |
setActionValue |
Change the promised value of one of the modal's buttons. You can either pass in just a string (by default it changes the value of the confirm button), or an object. | swal.setActionValue({ confirm: 'Text from input' }) |
stopLoading |
Removes all loading states on the modal's buttons. Use it in combination with the button option closeModal: false. |
swal.stopLoading() |
Theming
-
swal-overlayExample:
-
swal-modalExample:
-
swal-titleExample:
-
swal-textExample:
-
swal-footerExample:
-
swal-buttonDescription:
The modal's button(s). It has an extra class that changes depending on the button's type, in the format
swal-button--{type}. The extra class for the confirm button for example isswal-button--confirm.Example: