Be able to set which button is primary/secondary via javascript

[AdeRussell]

In SDK5 I'd like to be able to use the nice colour scheme that comes with identifying one bottom button as primary and one as secondary.  But I need to be able to change which one is secondary (left or right) dynamically.

I believe the only way to do this from javascript is to define multiple classes in CSS and then switch class dynamically.  My problem is that the button class is defined in SVG and I don't know what the corresponding CSS code needs to be.

In my index.view file the button is defined as class="text-button bottom left secondary">

How do I create a class definition in the styles.css file?

I want to do something like

.bottomLeft {

  xxx: text-button;

  yyy: bottom;

  zzz: left;

}

.bottomLeftSecondary {

  xxx: text-button;

  yyy: bottom;

  zzz: left;

  qqq: secondary;

}

Can this be done? If so what are the keys xxx, yyy etc?

[JonFitbit]

You should be able to just set the class value via JS.

const myButton = document.getElementById("myButton");
myButton.class = "text-button bottom left primary"