Basic message
Swal.fire('Any fool can use a computer');Title, text under and icon
Swal.fire(
'The Internet?',
'That thing is still around?',
'question'
);A modal with a title, an error icon, a text, and a footer
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Something went wrong!',
footer: 'Why do I have this issue?'
});Custom HTML description
Swal.fire({
title: 'HTML example',
icon: 'info',
html:
'You can use bold text, ' +
'links ' +
'and other HTML tags',
showCloseButton: true,
showCancelButton: true,
focusConfirm: false,
confirmButtonText:
' Great!',
confirmButtonAriaLabel: 'Thumbs up, great!',
cancelButtonText:
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-hand-thumbs-down" viewBox="0 0 16 16">
<path d="M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856 0 .289-.036.586-.113.856-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a9.877 9.877 0 0 1-.443-.05 9.364 9.364 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964l-.261.065zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a8.912 8.912 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581 0-.211-.027-.414-.075-.581-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.224 2.224 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.866.866 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1z"/>
</svg>',
cancelButtonAriaLabel: 'Thumbs down'
});A dialog with three buttons
Swal.fire({
title: 'Do you want to save the changes?',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: 'Save',
denyButtonText: `Don't save`,
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
Swal.fire('Saved!', '', 'success')
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
});A confirm dialog, with a function attached to the "Confirm" button
Swal.fire({
title: 'Are you sure?',
text: "You won't be able to revert this!",
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, delete it!'
}).then((result) => {
if (result.isConfirmed) {
Swal.fire(
'Deleted!',
'Your file has been deleted.',
'success'
)
}
});A message with a custom image
Swal.fire({
title: 'Sweet!',
text: 'Modal with a custom image.',
imageUrl: 'https://unsplash.it/400/200',
imageWidth: 400,
imageHeight: 200,
imageAlt: 'Custom image',
});A message with auto close timer
let timerInterval;
Swal.fire({
title: 'Auto close alert!',
html: 'I will close in milliseconds.',
timer: 3000,
timerProgressBar: true,
didOpen: () => {
Swal.showLoading()
const b = Swal.getHtmlContainer().querySelector('b')
timerInterval = setInterval(() => {
b.textContent = Swal.getTimerLeft()
}, 100)
},
willClose: () => {
clearInterval(timerInterval)
}
}).then((result) => {
/* Read more about handling dismissals below */
if (result.dismiss === Swal.DismissReason.timer) {
console.log('I was closed by the timer')
}
});AJAX request example
Swal.fire({
title: 'Submit your Github username',
input: 'text',
inputAttributes: {
autocapitalize: 'off'
},
showCancelButton: true,
confirmButtonText: 'Look up',
showLoaderOnConfirm: true,
preConfirm: (login) => {
return fetch(`//api.github.com/users/${login}`)
.then(response => {
if (!response.ok) {
throw new Error(response.statusText)
}
return response.json()
})
.catch(error => {
Swal.showValidationMessage(
`Request failed: ${error}`
)
})
},
allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
if (result.isConfirmed) {
Swal.fire({
title: `${result.value.login}'s avatar`,
imageUrl: result.value.avatar_url
})
}
});Custom html message, timer use an timer methods
let timerInterval;
Swal.fire({
title: 'Auto close alert!',
html: `I will close in <strong></strong> seconds.<br /><br />
<button id="increase" class="btn btn-outline-info">
I need 5 more seconds!
</button><br /><br />
<button id="stop" class="btn btn-outline-danger">
Please stop the timer!!
</button><br /><br />
<button id="resume" class="btn btn-outline-primary" disabled>
Phew... you can restart now!
</button><br /><br />
<button id="toggle" class="btn btn-outline-dark">
Toggle
</button>`,
timer: 10000,
position: 'center',
timerProgressBar: true,
customClass: {
confirmButton: 'btn btn-success btn-lg',
//popup: '',
actions: 'justify-content-center border-0 py-3 px-4 mt-3 mb-1'
},
didOpen: () => {
const content = Swal.getHtmlContainer();
const $ = content.querySelector.bind(content);
const stop = $('#stop');
const resume = $('#resume');
const toggle = $('#toggle');
const increase = $('#increase');
Swal.showLoading()
function toggleButtons() {
stop.disabled = !Swal.isTimerRunning();
resume.disabled = Swal.isTimerRunning();
if(Swal.isTimerRunning()) {
Swal.showLoading()
} else {
Swal.hideLoading()
}
}
stop.addEventListener('click', () => {
Swal.stopTimer()
toggleButtons()
})
resume.addEventListener('click', () => {
Swal.resumeTimer()
toggleButtons()
})
toggle.addEventListener('click', () => {
Swal.toggleTimer();
toggleButtons();
})
increase.addEventListener('click', () => {
Swal.increaseTimer(5000)
})
timerInterval = setInterval(() => {
Swal.getHtmlContainer().querySelector('strong')
.textContent = (Swal.getTimerLeft() / 1000)
.toFixed(0)
}, 100)
},
willClose: () => {
clearInterval(timerInterval)
},
didClose: () => {
SwalQuestion.fire({
text: "Are you ready?"
}).then(result => {
if (result.isConfirmed) {
SwalQuestion.fire({
text: 'Are you free?'
})
}
})
}
});