I am wondering if it's possible to use an aura attribute to set the button background color of a button.
I was able to statically set the background color using CSS and by giving the button a defined class. This seems to be the only want to override the predefined variant color options.
The goal is to allow the color to be defined within the aura attribute configurations, allowing the button color to be defined when adding it to a page layout (see image). I was able to do this successfully with the button label. I'm not sure how to do this with the background color or if it's even possible since CSS seems to be the only option to change the button color and I don't think you can use aura attribute variables and CSS together.
I need to use an aura/lighting component instead of an LWC for the time being.
Aura Component Buttom
<lightning:button
onclick="{!c.openModel}"
label="{!v.buttonLabel}"
class="custom-button"
/>
CSS
.THIS.custom-button{
background-color: purple;
color: white
}
Design File
<design:component>
<design:attribute name="buttonLabel" label="Button Label" description="Label for the button."
default="Placeholder Button Label"/>
<design:attribute name="buttonBackgroundColor" label="Button Background Color" description="Background color for the button."/>
</design:component>