Sweetalert: Add multiple class names to buttons

[krvajal]

When trying to customize the buttons I would like to be able to add multiple class names like

 {
  text: "OK",
  value: true,
  visible: true,
  className: "class1 class2",
  closeModal: true,
}

An example use case for this when integrating with material design lite that requires adding mdl-button and mdl-js-button.

[lionralfs]

I think it would be great if you could also pass an array of classNames like
className: ["class1", "class2"]

[RandyRam]

But this displays some error as shown below:

Error Content :

Argument of type '{ title: string; text: string; className: string[]; buttons: { confirm: { text: string; value: bo...' is not assignable to parameter of type 'string | Partial'.
Type '{ title: string; text: string; className: string[]; buttons: { confirm: { text: string; value: bo...' is not assignable to type 'Partial'.
Types of property 'className' are incompatible.
Type 'string[]' is not assignable to type 'string'.

How can i overcome this

[krvajal]

@RandyRam, it displays those errors because that feature is not implemented yet. I submitted a pull request that allows using a string with multiple class names separated by spaces like in the normal class attribute. It is not merged into the codebase but can be found at #744

[phongnhat19]

Has this feature been merged ? Because I'm using multiple class name (seperated by space) and I get this error:

Unhandled Rejection (InvalidCharacterError): Failed to execute 'add' on 'DOMTokenList': The token provided ('btn-link modal-cancel') contains HTML space characters, which are not valid in tokens.

Btw, I'm using swal with react.

[krvajal]

I think it is merged into master, but not release have been tagged yet, so
you will need to point to master in your package.json in order to get it.

M.Sc. Miguel Carvajal
Condensed Matter Theory Group
Bariloche Atomic Center
CNEA

On Tue, Dec 26, 2017 at 4:44 AM, phongnhat19 [e-mail]
wrote:

Has this feature been merged ? Because I'm using multiple class name
(seperated by space) and I get this error:

Unhandled Rejection (InvalidCharacterError): Failed to execute 'add' on
'DOMTokenList': The token provided ('btn-link modal-cancel') contains HTML
space characters, which are not valid in tokens.

Btw, I'm using swal with react.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/t4t5/sweetalert/issues/743#issuecomment-353933234,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFoEefJuuP1WFPuQrtZhfcmrDQd6iATHks5tEKPNgaJpZM4P0pmW
.

[lionralfs]

You're most likely trying to apply multiple classes to the modal itself, instead of a button.
This should work fine:

swal({
  text: "test",
  buttons: {
    confirm: {
      text: "OK",
      value: true,
      visible: true,
      className: "class1 class2",
      closeModal: true
    },
    cancel: {
      text: "Cancel",
      value: false,
      visible: true,
      className: "class3 class4"
    }
  }
});

Alternatively:

className: ["class1", "class2"]

[Charuru]

I thought this was merged? It still doesn't work. DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided