How to stylize the colors of buttons in spModal?

[zynsn]

Hi community,

How do I stylize the colors of the buttons on a spModal dialog box? I tried using class: and style:, class doesn't work and style: doesn't seem to apply the colors even though it is specified in the CSS page.

$scope.onActionClick = function(state) {
        if (state === c.data.CONST.REJECT_STATE) {
            if (c.data.requireRejectionComment && !c.data.useCommentBox) {
                // Create an input popup
                spModal.open({
                    title: c.data.CONST.i18n.REJECT_MODAL_TITLE,
                    message: c.data.CONST.i18n.REJECT_MODAL_MESSAGE,
                    input: true,
                    buttons: [
                        {label: c.data.CONST.i18n.REJECT_MODAL_CANCEL, cancel: true},
                        {label: c.data.CONST.i18n.REJECT_MODAL_SUBMIT, primary: true, style: "reject-button" } //tried adding this to the CSS page and tried using class:, it does not work

.reject-button {
    background-color: red;
    color: white;
}

[Community Alums]

Hello @zynsn ,

If you are using the above code then u have to use class instead of style. And add class on button not in label.

Else u can add CSS like this:-

div > button >.btn{

  /* your css ... */

}

Please refer this link also:

https://www.servicenow.com/community/developer-forum/how-to-style-spmodal-buttons/m-p/1784636 

Please mark my answer as accepted solution and helpful, if it works for you.

Thank you!