Sweet Alert 2 - Link in "confirmButtonText" button

Question

I would like to know how I could put a link in the button that generates the confirmButtonText of Sweet Alert 2.

The goal is that when you press that button redirects to a page that removes a record from a database, until now I had it with a simple link (<a>) in a simple button, but I would like to add this small confirmation.

Here is the code:

The buttons is as follows:

Prier

please code as text, not images – Alvira

User .then to move user to another page on confirmation sweetalert.js.org/guides – Tyrr

Answer 1

This will work!

confirmButtonText: '<a href="url">LINK</a>'

Agoraphobia

The problem here is that only the text will be clickable and not the full button. I find the answer of @iJassar solves this problem. – Gladiolus

Additionally, this results in invalid HTML with an <a> tag nested within a <button> tag. This should not be the accepted answer. – Throstle

Answer 2

What I did is attach a function to the confirm button that uses window.href to follow the link:

Swal.fire({
   title: '<strong>Are you sure?</strong>',
   icon: 'warning',
   html:`You really can't go back after this, We can't retrieve it either!`,
   showCloseButton: true,
   showCancelButton: true,
   focusConfirm: false,
   reverseButtons: true,
   focusCancel: true,
   cancelButtonText:`Blue pill`,
   confirmButtonText:`Red pill`
 }).then((result) => {
   if (result.value) {
     window.location.href = `/real_world`
   }
 }); 

Estreat

Answer 3

i think i am too late to respond the query, but it might help others who searching for similar thing.

Swal.fire({
        title: '<strong>Check Redirect!!</strong>',
        icon: 'success',
        showConfirmButton: false,
        allowOutsideClick: false,
        footer:`<a class="btn btn-primary" href="https://www.google.com">OK</a>`
    });

Tyranny

Clean answer. I believe this better uses the APIs of library instead of "hacking" button HTML or using nasty callbacks with window.location. – Jackijackie

Answer 4

You can use promising in sweet alert2

Swal.fire({
 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((result) => {
  if (result.value) {
  Swal.fire(
   'Deleted!',
   'Your file has been deleted.',
   'success'
 )
}
})

Even more, check: https://sweetalert2.github.io/

Kaifeng

Answer 5

Use window.open

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!',
  cancelButtonText: 'No'
}).then((result) => {
  if (result.isConfirmed) {
     window.open("https://www.google.com.br");
  }
})

Editorial