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 code

The buttons is as follows:

The button

User .then to move user to another page on confirmation https://sweetalert.js.org/guides/ — Habib, Feb 25 '19 at 06:44

score 15 · Accepted Answer · answered Apr 13 '19 at 15:41

15

This will work!

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

answered Apr 13 '19 at 15:41

Miro Grujin

626
6
13

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. – Thiplol Jun 08 '21 at 13:48

score 5 · Answer 2 · answered Apr 04 '20 at 20:56

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`
   }
 });

score 2 · Answer 3 · answered Feb 25 '19 at 02:32

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/

score 1 · Answer 4 · answered Sep 02 '20 at 16:19

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>`
    });

score 0 · Answer 5 · answered Dec 10 '21 at 23:57

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");
  }
})

Sweet Alert 2 - Link in "confirmButtonText" button

5 Answers5