logo
Sweet Alert

A beautiful, responsive, customizable, accessible (wai-aria) replacement for javascript's popup boxes. Demo page.

Basic example
Swal.fire('Any fool can use a computer')
A modal with a title,an error icon,a text.
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 and buttons with ARIA labels
Swal.fire({title:'<strong>HTML <u>example</u></strong>',icon:'info',html:'You can use <b>bold text</b>, '+'<a href="//sweetalert2.github.io">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 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 custom positioned dialog
Swal.fire({
  position: 'top-end',
  icon: 'success',
  title: 'Your work has been saved',
  showConfirmButton: false,
  timer: 1500
})
Custom animation with

Add this to your page:

<link rel="stylesheet" href="libs/animate/animate.min.css" type="text/css">
Swal.fire({
  title: 'Custom animation with Animate.css',
  showClass: {
    popup: 'animate__animated animate__fadeInDown'
  },
  hideClass: {
    popup: 'animate__animated animate__fadeOutUp'
  }
})
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'
    )
  }
})
Chaining modals (queue) example
Swal.mixin({
  input: 'text',
  confirmButtonText: 'Next →',
  showCancelButton: true,
  progressSteps: ['1', '2', '3']
}).queue([
  {
    title: 'Question 1',
    text: 'Chaining swal2 modals is easy'
  },
  'Question 2',
  'Question 3'
]).then((result) => {
  if (result.value) {
    const answers = JSON.stringify(result.value)
    Swal.fire({
      title: 'All done!',
      html: `
        Your answers:
        ${answers}
      `,
      confirmButtonText: 'Lovely!'
    })
  }
})
Dynamic queue example
const ipAPI = '//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: () => {
    return fetch(ipAPI)
      .then(response => response.json())
      .then(data => Swal.insertQueueStep(data.ip))
      .catch(() => {
        Swal.insertQueueStep({
          icon: 'error',
          title: 'Unable to get your public IP'
        })
      })
  }
}])
On this page