How to remove class from button and add custom class in sweetalert2?

Question

I am using sweetalert2 plugin. It works fine, but now i want to remove the button class and add my own class.

class=swal2-confirm swal2-styled but i need class=swal2-confirm btn btn-success

Any solution appreciated!

 Swal.fire({
        title: 'Are you sure?',
        text: 'You will not be able to recover this imaginary file!',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, keep it,'
    }).then((result) => {
        if (result.value) {
            Swal.fire(
                'Deleted!',
                'Your imaginary file has been deleted.',
                'success'
            )

        } else if (result.dismiss === Swal.DismissReason.cancel) {
            Swal.fire(
                'Cancelled',
                'Your imaginary file is safe :)',
                'error'
            )
        }
    })

Answer 1

You can do it using customClass:

customClass: {
    confirmButton: 'my-confirm-button-class'
},

Or, you may toggle classes onBeforeOpen:

onBeforeOpen: function(ele) {
    $(ele).find('button.swal2-confirm.swal2-styled')
          .toggleClass('swal2-confirm swal2-styled swal2-confirm btn btn-success')
}

$('#btn').on('click', function (e) {
  Swal.fire({
      title: 'Are you sure?',
      text: 'You will not be able to recover this imaginary file!',
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, keep it,',
      customClass: {
          //confirmButton: 'my-confirm-button-class'
      },
      onBeforeOpen: function(ele) {
          $(ele).find('button.swal2-confirm.swal2-styled').toggleClass('swal2-confirm swal2-styled swal2-confirm btn btn-success')
      }
  }).then(function (result) {
      if (result.value) {
          Swal.fire(
                  'Deleted!',
                  'Your imaginary file has been deleted.',
                  'success'
          )

      } else if (result.dismiss === Swal.DismissReason.cancel) {
          Swal.fire(
                  'Cancelled',
                  'Your imaginary file is safe :)',
                  'error'
          )
      }
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.css">


<button id="btn">Click Me</button>

is there a way where i can change permanent classes

I would suggest to add your local css style:

.swal2-styled.swal2-confirm {
.....
}

$('#btn').on('click', function (e) {
    Swal.fire({
        title: 'Are you sure?',
        text: 'You will not be able to recover this imaginary file!',
        type: 'warning',
        showCancelButton: true,
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, keep it,'
    }).then(function (result) {
        if (result.value) {
            Swal.fire(
                    'Deleted!',
                    'Your imaginary file has been deleted.',
                    'success'
            )

        } else if (result.dismiss === Swal.DismissReason.cancel) {
            Swal.fire(
                    'Cancelled',
                    'Your imaginary file is safe :)',
                    'error'
            )
        }
    })
})

.swal2-styled.swal2-confirm {
    color: #fff !important;
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    display: inline-block !important;
    font-weight: 400 !important;
    color: #212529 !important;
    text-align: center !important;
    vertical-align: middle !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    background-color: transparent !important;
    border: 1px solid transparent !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    border-radius: 0.25rem !important;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.css">


<button id="btn">Click Me</button>