compcobalt compcobalt - 1 year ago 134
Javascript Question

SweetAlert - Change Color of Button

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.

( SEE ))


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 plx!", 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 Source

You are using this version of SweetAlert: and in the source JS file (, 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: 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.