SweetAlert - 改变按钮的颜色

Question

I'm trying to change the color of the cancel button like I can for the confirm button but it doesn't seem to work for some reason.

swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    cancelButtonColor: "#DD6B55",
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel please!",
    closeOnConfirm: false,
    closeOnCancel: false
}, function (isConfirm) {
    if (isConfirm) {
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
    } else {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
});

Answer 1

You are using this version of SweetAlert: https://github.com/t4t5/sweetalert and in the source JS file ( https://t4t5.github.io/sweetalert/dist/sweetalert-dev.js ), there is no such parameter to change color of cancel button.

In the file you have used, the params are:

var defaultParams = {
  title: '',
  text: '',
  type: null,
  allowOutsideClick: false,
  showConfirmButton: true,
  showCancelButton: false,
  closeOnConfirm: true,
  closeOnCancel: true,
  confirmButtonText: 'OK',
  confirmButtonColor: '#8CD4F5',
  cancelButtonText: 'Cancel',
  imageUrl: null,
  imageSize: null,
  timer: null,
  customClass: '',
  html: false,
  animation: true,
  allowEscapeKey: true,
  inputType: 'text',
  inputPlaceholder: '',
  inputValue: '',
  showLoaderOnConfirm: false
};

May I suggest you to use this version of SweetAlert: https://github.com/limonte/sweetalert2 as here the option to change the cancel button color is present.

You can modify the source code of the first JS file, however in the second version it is readily available.

There is always the option available to use CSS to modify button colors. But if you want to make it customizable using JS, then SweetAlert2 is a better alternative.

Answer 2

[update => hover option]

Maybe it'll help someone who use 2nd version
https://sweetalert.js.org/guides/#installation

Javascript

swal({
    title: "Apakah anda yakin?",
    text: "Anda dapat mengaktifkannya lagi nanti...",
    icon: "warning",
    buttons: {
        confirm : {text:'Ubah',className:'sweet-warning'},
        cancel : 'Batalkan'
    },
}).then((will)=>{
    if(will){
        $(".onoffswitch-checkbox").prop('checked',false);
    }else{
        $("#all_petugas").click();
    }
});

CSS

...
.sweet-warning{
 background-color: black;
 #or anything you wanna do with the button
}

.sweet-warning:not([disabled]):hover{
 #hover here
}
...

Answer 3

To have a custom Cancel button use the "customClass" function and build your css to target the cancel button.

JavaScript:

swal({   
title: "Are you sure?",   
   text: "You will not be able to recover this imaginary file!",   
   type: "warning",   
   showCancelButton: true,      
   confirmButtonColor: "#DD6B55",   
   confirmButtonText: "Yes, delete it!",   
   cancelButtonText: "No, cancel plx!",   
   closeOnConfirm: false,   
   closeOnCancel: false,
   customClass: "Custom_Cancel"
}, 
function(isConfirm){   
   if (isConfirm) {     
      swal("Deleted!", "Your imaginary file has been deleted.", "success");   
   } else {     
      swal("Cancelled", "Your imaginary file is safe :)", "error");   
   } 
});

CSS:

.Custom_Cancel > .sa-button-container > .cancel {
   background-color: #DD6B55;
   border-color: #DD6B55;
}
.Custom_Cancel > .sa-button-container > .cancel:hover {
   background-color: #DD6B55;
   border-color: #DD6B55;
}

Answer 4

You can try following.

SweetAlert.swal({
                        title: 'Thank you',
                        text: 'Thank you for using the quoting tool. Your Quote PDF has been downloaded. The quote has been sent to U.S. Legal for approval.',
                        type: 'warning',
                        confirmButtonText: 'Cancel',
    confirmButtonColor: "#DD6B55"});

Answer 5

Sweet Alert 1

In CSS you can do this:

.swal-button--confirm {
    background: #0a0;
}

.swal-button--cancel {
    background: #aaa;
}

.swal-button--danger {
    background: #a00;
}

Add this if you don't want the button flash when it clicked.

.swal-button--confirm:active {
    background: #0a0;
}

.swal-button--cancel:active {
    background: #aaa;
}

.swal-button--danger:active {
    background: #a00;
}

Hope it helps :D

Answer 6

Add this to your css to override sweetalert2 style:

.swal2-styled.swal2-cancel{
  background-color: #dc3545 !important;
}

Answer 7

For those who want to use SweetAlert2 , for example:

You can also migrate from SweetAlert to SweetAlert2 as needed.

 Swal.fire({ title: 'Are you sure?', text: "You won't be able to revert this! ⚠️", type: 'warning', showCancelButton: true, // Background color of the "Confirm"-button. The default color is #3085d6 confirmButtonColor: 'LightSeaGreen', // Background color of the "Cancel"-button. The default color is #aaa cancelButtonColor: 'Crimson', confirmButtonText: 'Yes, delete it!' }).then((result) => { if (result.value) { Swal.fire({ type: 'success', title: 'Deleted!', text: "Your file has been deleted.", timer: 2000, showCancelButton: false, showConfirmButton: false }) } })

 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>

---

Upgrading to v9.x of SweetAlert2.

Breaking change - rename type to icon

 Swal.fire({ title: 'Are you sure?', text: "You won't be able to revert this! ⚠️", icon: 'warning', showCancelButton: true, // Background color of the "Confirm"-button. The default color is #3085d6 confirmButtonColor: 'LightSeaGreen', // Background color of the "Cancel"-button. The default color is #aaa cancelButtonColor: 'Crimson', confirmButtonText: 'Yes, delete it!' }).then((result) => { if (result.value) { Swal.fire({ icon: 'success', title: 'Deleted!', text: "Your file has been deleted.", timer: 2000, showCancelButton: false, showConfirmButton: false }) } })

 <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

Answer 8

There is no default way of doing this. But, you can override the style with custom css..

Check this fiddle: https://jsfiddle.net/74agy8ew/1/

Answer 9

The easiest solution I have found:

add this to app.css:

.swal-modal {
    background-color: rgba(0, 0, 0, 0.651);
    color: white;
}
.swal-text {
    color: white;
    font-size: 33px;
}
.swal-button {
    background-color: #ff2600;
    color: #ffffff;
}

Answer 10

You can set the class to each button

            customClass: {
                confirmButton: 'btn btn-primary',
                cancelButton: 'btn btn-secondary',
            }

Answer 11

confirmButtonColor is no longer used. Instead, you should specify all stylistic changes through CSS. As a useful shorthand, you can set dangerMode: true to make the confirm button red. Otherwise, you can specify a class in the button object. enter link description here

Answer 12

For Sweetalert2

Swal.fire({
  title: "Error!",
  text: "Image is not selected",
  icon: "error",
  confirmButtonText: "OK",
  showCloseButton:true,
});


css

.swal2-close{
 background-color:black;
 color: red;
 }

Answer 13

In CSS you can do this

.sweet-alert button.cancel {
    background-color: #FE9475;
}

Answer 14

For sweetalert2 v11.4.0

I use in js

Swal.fire({
  title: 'My title',
  text: 'description',
  icon: 'success',
  buttonsStyling: false,
  customClass: {
    confirmButton: 'sweet-alert-button'
  },
})

In css

.sweet-alert-button {
  background: #fac62d;
}

Answer 15

Change Color Of Button:

 .swal2-confirm {
        background-color: #008cba !important;
    }