Question

127

SweetAlert - Change Color of Button

rated 0 times [ 129] [ 2] / answers: 1 / hits: 128742 / 8 Years ago, mon, october 3, 2016, 12:00:00

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

    }

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

maureen

Add To Favorites

Follow

Total Points: 151

Total Questions: 110

Total Answers: 110

Location: Mali

Member since Fri, Dec 3, 2021

3 Years ago

maureen questions

1 VideoJS Error: The element or ID supplied is not valid

Mon, Oct 11, 21, 00:00, 3 Years ago

1 how to get result from promise

Wed, Jun 30, 21, 00:00, 3 Years ago

1 Sending mail in Nuxt.js with nuxt-mail

Thu, Apr 15, 21, 00:00, 3 Years ago

1 Cypress contains statement in if/else condition

Tue, Mar 16, 21, 00:00, 3 Years ago

1 Delete a key under a condition in Javascript object

Mon, Dec 7, 20, 00:00, 4 Years ago

View All

answered 8 Years ago tyreek · Accepted Answer

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.