SweetAlert - Change Color of Button

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

`cancelButtonColor` isn't an option in [the API](http://t4t5.github.io/sweetalert/) — chazsolo, Oct 03 '16 at 17:24
I don't see that option in the docs. Maybe there it's not supported. You can always create your own class with CSS. — Adam Azad, Oct 03 '16 at 17:25

score 38 · Accepted Answer · answered Oct 03 '16 at 17:38

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.

Here's the simple migration guide from SweetAlert to SweetAlert2: https://github.com/limonte/sweetalert2/wiki/Migration-from-SweetAlert-to-SweetAlert2 — Limon Monte, Oct 03 '16 at 18:24
Just a late comment, SWAL adds classes it doesn't use, like .confirm and .cancel, this can be defined on your stylesheets, but you need to set background to !important because SWAL (not sure i used swal2) puts background color on buttons directly in the element style attribute. — Felype, Jul 26 '17 at 16:27

Akbar Noto · Answer 2 · 2020-03-06T02:18:00.003

13

[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
}
...

edited Mar 06 '20 at 02:18

answered Apr 14 '19 at 00:39

Akbar Noto

570
6
11

Exactly what I needed. `buttons` property accepts an `Object` where you can define properties for each button individually. Extra points untuk pakai Bahasa Indonesia di contoh :) – camslice Apr 02 '21 at 10:03

score 10 · Answer 3 · answered Nov 20 '18 at 17:38

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

This is a very good option when we cant upgrade to SweetAlert 2. Very helpful and we can also customise the confirm button via css too using the `.Custom_Cancel` class. — Neel, Mar 12 '19 at 17:40
We are still using the old version of sweetalert. We are in the process of upgrading sweetalert but this solution is perfect in the meantime. Thanks. — Andrew, Dec 06 '19 at 12:47

Penny Liu · Answer 4 · 2020-03-20T02:40:05.410

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>

score 8 · Answer 5 · answered Oct 18 '17 at 14:33

8

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

answered Oct 18 '17 at 14:33

Jignesh Mesvaniya

390
5
6

2

How about the on-hover? – ricks Oct 09 '18 at 13:30

tscpp · Answer 6 · 2018-10-01T16:16:26.740

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

score 4 · Answer 7 · edited Apr 06 '18 at 09:05

4

Add this to your css to override sweetalert2 style:

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

edited Apr 06 '18 at 09:05

NightOwl888

55,572
24
139
212

answered Apr 06 '18 at 09:00

Rye

41
1

4

Don't be the guy to add important. No-one likes that guy. – Beakie Aug 21 '18 at 13:51

score 4 · Answer 8 · answered Nov 11 '21 at 09:41

4

You can set the class to each button

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

answered Nov 11 '21 at 09:41

dtmiRRor

581
4
17

Daniel Ohayon · Answer 9 · 2023-01-31T13:13:48.590

3

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

edited Jan 31 '23 at 13:13

answered May 22 '21 at 23:06

Daniel Ohayon

71
3

score 1 · Answer 10 · answered Oct 03 '16 at 17:26

1

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/

answered Oct 03 '16 at 17:26

Pranesh Ravi

18,642
9
46
70

score 0 · Answer 11 · answered Oct 18 '20 at 02:38

0

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

answered Oct 18 '20 at 02:38

Izzamed

83
4

This answer is plagiarized. – tomasantunes Nov 02 '22 at 17:19

score 0 · Answer 12 · answered Oct 26 '20 at 04:56

0

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

answered Oct 26 '20 at 04:56

Thilini Liyanagama

29
5

score 0 · Answer 13 · answered Jul 12 '21 at 03:46

0

In CSS you can do this

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

answered Jul 12 '21 at 03:46

Ishara Samintha

460
6
8

score 0 · Answer 14 · edited Apr 05 '22 at 19:24

0

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

edited Apr 05 '22 at 19:24

kernel

3,654
3
25
33

answered Feb 15 '22 at 07:15

kostikovmu

411
5
6

score 0 · Answer 15 · answered Oct 26 '22 at 14:50

0

Change Color Of Button :

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

answered Oct 26 '22 at 14:50

Ragab Mohamad

371
2
4

SweetAlert - Change Color of Button

15 Answers15

Linked