Message Example
swal(
  'The Internet?',
  'That thing is still around?',
  'question'
)
Title and error icon
swal({
  type: 'error',
  title: 'Oops...',
footer: ' Why do I have this issue?'
})
Custom HTML description
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',
})
Ajax 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: () => {
    return fetch(ipAPI)
      .then(response => response.json())
      .then(data => swal.insertQueueStep(data.ip)),
      .catch(() => {
        swal.insertQueueStep({
          type: 'error',
          title: 'Unable to get your public IP'
        })
      })
  }
}])
Warning message - Confirm button
swal({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonClass: 'btn btn-primary shadow-3 mr-2',
  cancelButtonClass: 'btn btn-danger shadow-3', buttonsStyling: false,
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
   swal(
    'Deleted!',
    'Your file has been deleted.',
    'success'
   )
  }
})
Something else for Cancel
swal({   title: 'Are you sure?',
  text: "You won't be able to revert this!",
  type: 'warning',
  showCancelButton: true,
  confirmButtonClass: 'btn btn-primary shadow-3 mr-2',
  cancelButtonClass: 'btn btn-danger shadow-3', buttonsStyling: false,
  confirmButtonText: 'Yes,
delete it!',
  cancelButtonText: 'No,
cancel!',
  confirmButtonClass: 'btn btn-success',
  cancelButtonClass: 'btn btn-danger mr-2',
  buttonsStyling: false,
  reverseButtons: true
}).then((result) => {
  if (result.value) {
    swal(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  } else if (
    // Read more about handling dismissals
    result.dismiss === swal.DismissReason.cancel
  ) {
    swal(
      'Cancelled',
      'Your imaginary file is safe :)',
      'error'
    )
  }
})
  • 15 mns ago
  • 21 mns ago
  • 35 mns ago
  • 47 mns ago
  • 1 hour ago
  • 1 day ago
  • 15 mns ago
  • 21 mns ago
  • 35 mns ago
  • 47 mns ago
  • 1 hour ago
  • 1 day ago
  • User Avatar

    @frankwilliams 15 mns ago
  • User Avatar

    @mollysims 21 mns ago
  • User Avatar

    @johndoe 35 mns ago
  • User Avatar

    @frankwilliams 47 mns ago
  • User Avatar

    @nellyfrank 1 hour ago
  • User Avatar

    @bertkramp 1 day ago
  • User Avatar

    @frankwilliams 15 mns ago
  • User Avatar

    @mollysims 21 mns ago
  • User Avatar

    @johndoe 35 mns ago
  • User Avatar

    @frankwilliams 47 mns ago
  • User Avatar

    @nellyfrank 1 hour ago
  • User Avatar

    @bertkramp 1 day ago

Header Color

White

Dark

Primary

Danger

Success

Info

Warning

Quaternary

Quinary

Senary

Septenary

Octonary

Nonary

Denary

Sidebar Color

Dark

White

Sidebar Layout

Toggle the left sidebar's state (open or collapse)

Sowh hide Sidebar in minimum size