Donate
alert('You clicked the button!')
swal( 'Good job!', 'You clicked the button!', 'success' )
Pretty cool huh? SweetAlert2 automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!
A title with a text under
swal( 'The Internet?', 'That thing is still around?', 'question' )
An error message
swal( 'Oops...', 'Something went wrong!', 'error' )
A modal window with a long text inside:
swal({
html: 'Less is more.<br>'.repeat(100)
})
Custom HTML description and buttons with ARIA labels
swal({
title: '<i>HTML</i> <u>example</u>',
type: 'info',
html:
'You can use <b>bold text</b>, ' +
'<a href="//github.com">links</a> ' +
'and other HTML tags',
showCloseButton: true,
showCancelButton: true,
focusConfirm: false,
confirmButtonText:
'<i class="fa fa-thumbs-up"></i> Great!',
confirmButtonAriaLabel: 'Thumbs up, great!',
cancelButtonText:
'<i class="fa fa-thumbs-down"></i>',
cancelButtonAriaLabel: 'Thumbs down',
})
A custom positioned dialog
swal({
position: 'top-right',
type: 'success',
title: 'Your work has been saved',
showConfirmButton: false,
timer: 1500
})
jQuery HTML with custom animation (Animate.css )
swal({
title: 'jQuery HTML example',
html: $('<div>')
.addClass('some-class')
.text('jQuery is everywhere.'),
animation: false,
customClass: 'animated tada'
})
A warning message, with a function attached to the "Confirm"-button...
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then(function (result) {
if (result.value) {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
})
... and by passing a parameter, you can execute something else for "Cancel".
swal({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false
}).then(function (result) {
if (result.value) {
swal(
'Deleted!',
'Your file has been deleted.',
'success'
)
// result.dismiss can be 'cancel', 'overlay',
// 'close', and 'timer'
} else if (result.dismiss === 'cancel') {
swal(
'Cancelled',
'Your imaginary file is safe :)',
'error'
)
}
})
A message with a custom image and CSS animation disabled
swal({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://unsplash.it/400/200',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
animation: false
})
A message with custom width, padding and background
swal({
title: 'Custom width, padding, background.',
width: 600,
padding: 100,
background: '#fff url(//bit.ly/1Nqn9HU)'
})
A message with auto close timer
swal({
title: 'Auto close alert!',
text: 'I will close in 5 seconds.',
timer: 5000,
onOpen: function () => {
swal.showLoading()
}
}).then(function (result) {
if (result.dismiss === 'timer') {
console.log('I was closed by the timer')
}
})
Ajax request example
swal({
title: 'Submit email to run ajax request',
input: 'email',
showCancelButton: true,
confirmButtonText: 'Submit',
showLoaderOnConfirm: true,
preConfirm: function (email) => {
return new Promise(function (resolve) => {
setTimeout(function () {
if (email === 'taken@example.com') {
swal.showValidationError(
'This email is already taken.'
)
}
resolve()
}, 2000)
})
},
allowOutsideClick: false
}).then(function (result) {
if (result.value) {
swal({
type: 'success',
title: 'Ajax request finished!',
html: 'Submitted email: ' + result.email
})
}
})
Chaining modals (queue) example
swal.setDefaults({
input: 'text',
confirmButtonText: 'Next →',
showCancelButton: true,
progressSteps: ['1', '2', '3']
})
var steps = [
{
title: 'Question 1',
text: 'Chaining swal2 modals is easy'
},
'Question 2',
'Question 3'
]
swal.queue(steps).then(function (result) {
swal.resetDefaults()
if (result.value) {
swal({
title: 'All done!',
html:
'Your answers: <pre>' +
JSON.stringify(result.value) +
'</pre>',
confirmButtonText: 'Lovely!'
})
}
})
Dynamic queue example
const ipAPI = 'https://api.ipify.org?format=json' swal.queue([{ title: 'Your public IP', confirmButtonText: 'Show my public IP', text: 'Your public IP will be received ' + 'via AJAX request', showLoaderOnConfirm: true, preConfirm: function () { return new Promise(function (resolve) { return $.get(ipAPI).then(function (data) { swal.insertQueueStep(data.ip) }) }} } }])
$ npm install sweetalert2
Or
$ bower install sweetalert2
Or download from CDN: cdnjs.com/limonte-sweetalert2
1. Initialize the plugin by referencing the necessary files:
<script src="bower_components/sweetalert2/dist/sweetalert2.all.min.js"></script> <!-- Include a polyfill for ES6 Promises (optional) for IE11 and Android browser --> <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
You can also include the stylesheet separately if desired:
<script src="bower_components/sweetalert2/dist/sweetalert2.min.js"></script> <link rel="stylesheet" href="bower_components/sweetalert2/dist/sweetalert2.min.css">
Or
// ES6 Modules or TypeScript import swal from 'sweetalert2' // CommonJS const swal = require('sweetalert2')
2. Call the sweetAlert2-function after the page has loaded
swal({
title: 'Error!',
text: 'Do you want to continue',
type: 'error',
confirmButtonText: 'Cool'
})
Here are the keys that you can use if you pass an object into sweetAlert2:
| Argument | Default value | Description |
|---|---|---|
| title | null | 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 | null | The title of the modal, as text. Useful to avoid HTML injection. |
| text | null | A description for the modal. It can either be added to the object under the key "text" or passed as the second parameter of the function. |
| html | null | A HTML description for the modal. If "text" and "html" parameters are provided in the same time, "text" will be used. |
| type | null | The type of the modal. SweetAlert2 comes with 5 built-in types which will show a corresponding icon animation: warning, error, success, info and question. It can either be put in the array under the key "type" or passed as the third parameter of the function. |
| backdrop | true | Whether or not SweetAlert2 should show a full screen click-to-dismiss backdrop |
| 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 | null | Input field type, can be text, email, password, number, tel, range, textarea, select, radio, checkbox, file and url. |
| width | '500px' | Modal window width, including paddings (box-sizing: border-box). Can be in px or %. |
| padding | 20 | Modal window padding. |
| background | '#fff' | Modal window background (CSS background property). |
| position | 'center' | Modal window position, can be 'top', 'top-left', 'top-right', 'center', 'center-left', 'center-right', 'bottom', 'bottom-left', or 'bottom-right'. |
| grow | 'false' | Paired with window position, sets the direction the modal should grow in, can be set to 'row', 'column', 'fullscreen', or false. |
| customClass | null | A custom CSS class for the modal. |
| timer | null | Auto close timer of the modal. Set in ms (milliseconds). |
| animation | true | If set to false, modal CSS animation will be disabled. |
| allowOutsideClick | true | If set to false, the user can't dismiss the modal by clicking outside it. |
| allowEscapeKey | true | If set to false, the user can't dismiss the modal by pressing the Escape key. |
| 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. |
| showConfirmButton | true | If set to false, a "Confirm"-button will not be shown. It can be useful when you're using custom HTML description. |
| 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. |
| cancelButtonText | 'Cancel' | Use this to change the text on the "Cancel"-button. |
| confirmButtonColor | '#3085d6' | Use this to change the background color of the "Confirm"-button (must be a HEX value). |
| cancelButtonColor | '#aaa' | Use this to change the background color of the "Cancel"-button (must be a HEX value). |
| confirmButtonClass | null | A custom CSS class for the "Confirm"-button. |
| cancelButtonClass | null | A custom CSS class for the "Cancel"-button. |
| confirmButtonAriaLabel | '' | Use this to change the aria-label for the "Confirm"-button. |
| cancelButtonAriaLabel | '' | Use this to change the aria-label for the "Cancel"-button. |
| buttonsStyling | true | Apply default swal2 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. |
| 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. |
| closeButtonAriaLabel | 'Close this dialog' | Use this to change the aria-label for the close button. |
| showLoaderOnConfirm | false | Set to true to disable buttons and show that something is loading. Use it in combination with the preConfirm parameter. |
| preConfirm | null | Function to execute before confirm, may be async (Promise-returning) or sync, see usage example. |
| imageUrl | null | Add a customized icon for the modal. Should contain a string with the path or URL to the image. |
| imageWidth | null | If imageUrl is set, you can specify imageWidth to describes image width in px. |
| imageHeight | null | Custom image height in px. |
| imageAlt | '' | An alternative text for the custom image icon. |
| imageClass | null | A custom CSS class for the customized icon. |
| inputPlaceholder | '' | Input field placeholder. |
| inputValue | '' | Input field initial value. |
| inputOptions | {} or Promise | If input parameter is set to "select" or "radio", you can provide options. Object keys will represent options values, object values will represent options text values. |
| 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 | null | Validator for input field, may be async (Promise-returning) or sync, see usage example. |
| inputClass | null | A custom CSS class for the input field. |
| progressSteps | [] | Progress steps, useful for modal queues, see usage example. |
| currentProgressStep | null | Current active progress step. The default is swal.getQueueStep() |
| progressStepsDistance | '40px' | Distance between progress steps. |
| onBeforeOpen | null | Function to run when modal built, but not shown yet. Provides modal DOM element as the first argument. |
| onOpen | null | Function to run when modal opens, provides modal DOM element as the first argument. |
| onClose | null | Function to run when modal closes, provides modal DOM element as the first argument. |
| useRejections | false | Deprecated and will be removed in the next major release. Determines whether dismissals (outside click, cancel button, close button, Esc key, timer) should resolve with an object of the format { dismiss: reason } or reject the promise. |
| expectRejections | false | Deprecated and will be removed in the next major release. Determines whether given inputValidator and preConfirm functions should be expected to to signal validation errors by rejecting, or by their respective means (see documentation for each option). |
You can redefine default params by using swal.setDefaults(customParams).
When an alert is dismissed by the user, the Promise returned by swal() will be resolved with an object { dismiss: reason } documenting the reason it was dismissed:
| String | Description | Related configuration |
|---|---|---|
| 'overlay' | The user clicked the overlay. | allowOutsideClick |
| 'cancel' | The user clicked the cancel button. | showCancelButton |
| 'close' | The user clicked the close button. | showCloseButton |
| 'esc' | The user clicked the Esc key. | allowEscapeKey |
| 'timer' | The timer ran out, and the alert closed automatically. | timer |
| success | ||
| error | ||
| warning | ||
| info | ||
| question |
| text |
const {value: name} = await swal({ title: 'What is your name?', input: 'text', inputPlaceholder: 'Enter your name or nickname', showCancelButton: true, inputValidator: function (value) { return !value && 'You need to write something!' } }) if (name) { swal({type: 'success', title: 'Hi, ' + name}) } |
|
const {value: email} = await swal({ title: 'Input email address', input: 'email', inputPlaceholder: 'Enter your email address' }) if (email) { swal('Entered email: ' + email) } |
||
| url |
const {value: url} = await swal({ input: 'url', inputPlaceholder: 'Enter the URL' }) if (url) { swal('Entered URL: ' + url) } |
|
| password |
const {value: password} = await swal({ title: 'Enter your password', input: 'password', inputPlaceholder: 'Enter your password', inputAttributes: { 'maxlength': 10, 'autocapitalize': 'off', 'autocorrect': 'off' } }) if (password) { swal('Entered password: ' + password) } |
|
| textarea |
const {value: text} = await swal({ input: 'textarea', inputPlaceholder: 'Type your message here', showCancelButton: true }) if (text) { swal(text) } |
|
| select |
const {value: country} = await swal({ title: 'Select Ukraine', input: 'select', inputOptions: { 'SRB': 'Serbia', 'UKR': 'Ukraine', 'HRV': 'Croatia' }, inputPlaceholder: 'Select country', showCancelButton: true, inputValidator: function (value) { return new Promise(function (resolve) { if (value === 'UKR') { resolve() } else { resolve('You need to select Ukraine :)') } }) } }) if (country) { swal('You selected: ' + country) } |
|
| radio |
// inputOptions can be an object or Promise var inputOptions = new Promise(function (resolve) { setTimeout(function () { resolve({ '#ff0000': 'Red', '#00ff00': 'Green', '#0000ff': 'Blue' }) }, 2000) }) const {value: color} = await swal({ title: 'Select color', input: 'radio', inputOptions: inputOptions, inputValidator: function (value) { return !value && 'You need to choose something!' } }) if (color) { swal({html: 'You selected: ' + result}) } |
|
| checkbox |
const {value: accept} = await swal({ title: 'Terms and conditions', input: 'checkbox', inputValue: 1, inputPlaceholder: 'I agree with the terms and conditions', confirmButtonText: 'Continue <i class="fa fa-arrow-right></i>', inputValidator: function (result) { return !result && 'You need to agree with T&C' } }) if (accept) { swal('You agreed with T&C :)') } |
|
| file |
const {value: file} = await swal({ title: 'Select image', input: 'file', inputAttributes: { 'accept': 'image/*', 'aria-label': 'Upload your profile picture' } }) if (file) { var reader = new FileReader reader.onload = function (e) { swal({ title: 'Your uploaded picture', imageUrl: e.target.result, imageAlt: 'The uploaded picture' }) } reader.readAsDataURL(file) } |
|
| range |
swal({
title: 'How old are you?',
type: 'question',
input: 'range',
inputAttributes: {
min: 8,
max: 120,
step: 1
},
inputValue: 25
})
|
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:
const {value: formValues} = await swal({ title: 'Multiple inputs', html: '<input id="swal-input1" class="swal2-input">' + '<input id="swal-input2" class="swal2-input">', focusConfirm: false, preConfirm: function () { return [ $('#swal-input1').val(), $('#swal-input2').val() ] } }) if (formValues) { swal(JSON.stringify(formValues)) } |
| Method | Description |
|---|---|
| swal.isVisible() | Determine if modal is shown. |
| swal.setDefaults({Object}) | If you end up using a lot of the same settings when calling SweetAlert2, you can use setDefaults at the start of your program to set them once and for all! |
| swal.resetDefaults() | Resets settings to their default value. |
| swal.close() or swal.closeModal() | Close the currently open SweetAlert2 modal programmatically. |
| swal.getTitle() | Get the modal title. |
| swal.getContent() | Get the modal content. |
| swal.getImage() | Get the image. |
| swal.getConfirmButton() | Get the "Confirm" button. |
| swal.getCancelButton() | Get the "Cancel" button. |
| swal.getButtonsWrapper() | Get the buttons wrapper. |
| swal.enableButtons() | Enable "Confirm" and "Cancel" buttons. |
| swal.disableButtons() | Disable "Confirm" and "Cancel" buttons. |
| swal.enableConfirmButton() | Enable the "Confirm"-button only. |
| swal.disableConfirmButton() | Disable the "Confirm"-button only. |
| swal.showLoading() or swal.enableLoading() | Disable buttons and show loader. This is useful with AJAX requests. |
| swal.hideLoading() or swal.disableLoading() | Enable buttons and hide loader. |
| swal.clickConfirm() | Click the "Confirm"-button programmatically. |
| swal.clickCancel() | Click the "Cancel"-button programmatically. |
| swal.showValidationError(error) | Show validation error message. |
| swal.resetValidationError() | Hide validation error message. |
| 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.queue([Array]) | Provide array of SweetAlert2 parameters to show multiple modals, one modal after another. See usage example |
| swal.getQueueStep() | Get the index of current modal in queue. When there's no active queue, null will be returned. |
| swal.insertQueueStep() | Insert a modal to queue, you can specify modal positioning with second parameter. By default a modal will be added to the end of a queue. |
| swal.deleteQueueStep(index) | Delete a modal at index from queue. |
| swal.getProgressSteps() | Progress steps getter. |
| swal.setProgressSteps([]) | Progress steps setter. |
| swal.showProgressSteps() | Show progress steps. |
| swal.hideProgressSteps() | Hide progress steps. |
| swal.isValidParameter({String}) | Determine if parameter name is valid. |
Has SweetAlert2 helped you create an amazing application?
You can show your support by making a donation in one of two ways:
Feel free to fork SweetAlert2 on GitHub if you have any features that you want to add!
