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,
  confirmButtonColor: '#448AFF',
  cancelButtonColor: '#d33',
  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,
  confirmButtonColor: '#448AFF',
  cancelButtonColor: '#d33',
  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'
    )
  }
})
New Notifications
  • Files uploaded

    15 mns ago
  • Chat bot initialized

    21 mns ago
  • Server failed on loading

    35 mns ago
  • Tickets waiting approval

    47 mns ago
  • 3 New Files archived

    1 hour ago
  • New Products added

    1 day ago
  • Files uploaded

    15 mns ago
  • Chat bot initialized

    21 mns ago
  • Server failed on loading

    35 mns ago
  • Tickets waiting approval

    47 mns ago
  • 3 New Files archived

    1 hour ago
  • New Products added

    1 day ago
New Notifications
  • User Avatar

    Files uploaded

    @frankwilliams 15 mns ago
  • User Avatar

    Chat bot initialized

    @mollysims 21 mns ago
  • User Avatar

    Server failed on loading

    @johndoe 35 mns ago
  • User Avatar

    Tickets waiting approval

    @frankwilliams 47 mns ago
  • User Avatar

    3 New Files archived

    @nellyfrank 1 hour ago
  • User Avatar

    New Products added

    @bertkramp 1 day ago
  • User Avatar

    Files uploaded

    @frankwilliams 15 mns ago
  • User Avatar

    Chat bot initialized

    @mollysims 21 mns ago
  • User Avatar

    Server failed on loading

    @johndoe 35 mns ago
  • User Avatar

    Tickets waiting approval

    @frankwilliams 47 mns ago
  • User Avatar

    3 New Files archived

    @nellyfrank 1 hour ago
  • User Avatar

    New Products added

    @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