Use aura attribute to define button background color

Question

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>

Answer 1

There are a couple of ways of approaching this.

1. Use a defined list of colours If you have a defined list of colours that you want the user to be able to select, you can add or remove styles from within the JavaScript Controller/Helper as documented here. To do this, you'd need to update the component with the following:

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." datasource="Option1,Option2,Option3"/>
</design:component>

Controller

//This should be called from your onInit method.
applyCSS: function(component, event) {
    var buttonClass = component.get("v.buttonBackgroundColor");
    //Note, you need to add an aura:id for this to be found
    var buttonTarget = component.find('buttonId');
    $A.util.addClass(buttonTarget, buttonClass);
}

2. Alternatively you can apply the individual styles like this:

component.find('buttonId').getElement().style.backgroundColor = component.get("v.buttonBackgroundColor");

Once again, noting that you will need the aura:id added to your button.

References: Adding and Removing Styles Get and change value of CSS

Answer 2

You can use CSS variables to make this happen.

Component Markup

<aura:component implements="flexipage:availableForAllPageTypes" access="public">
    <aura:attribute name="backgroundColor" type="String" access="public" />
    <div class="background">
        This is some text.
    </div>
</aura:component>

Style

.THIS.background {
    background-color: var(--background-color);
}

Renderer

afterRender: function (component, helper) {
    this.superAfterRender();
    component.getElement().style.setProperty('--background-color', component.get("v.backgroundColor"));
}

In other words, you do need a small bit of JavaScript in order to hook up the CSS styles to the attribute. Consider this another alternative to the other answer, which includes other ways you can achieve this.