Need Help Finishing Code to Change Aura Button Color for Flow

Question

I am following this Salesforce article to modify the "brand" button variant with a custom color, but it will not use my css styling changes. The goal is to use it in Screen Flow, and also pass a variable input from the flow (button label).

Here is my code so far:

Aura Component

<aura:component implements="lightning:availableForFlowScreens" access="global">

    <aura:attribute name="nextButtonLabel" type="String" default="Next"/>
    
    <lightning:button  class="button" variant="brand" label="{!v.nextButtonLabel}" name="ButtonNext" onclick="{!c.handleClick}" />

</aura:component>

Controller

({
    handleClick : function(component, event, helper) {
        
        var buttonName = event.getSource().get("v.name");
        var action ="";
        
        if (buttonName == 'ButtonNext')
       
                action="NEXT";      

        var navigate = component.get('v.navigateFlow');  
        navigate(action); 
        
        
    }
})

Style

.THIS :host {
  --slds-c-button-brand-color-background: orange;
  --slds-c-button-brand-color-border: orange;
}

Design

<design:component >
    <design:attribute name="nextButtonLabel" label="Next Button Label"/>
</design:component>

Here, you can see I've added the Aura Component to a screen flow.

But when running the flow, the color does not change, and it stays on the default brand color.

Any help is greatly appreciated!

Answer 1

What worked for me was applying a particular class name that also applies other properties; then using that class in the css. This one also makes the button appear to the right.

<div class="slds-float_right">
<lightning:button aura:id="NEXT" label= "Next" 
                  variant = "brand" onclick="{!c.onButtonPressed}"/></div> 

.THIS .slds-float_right{
--slds-c-button-brand-color-background: orange;
--slds-c-button-brand-color-border: orange;}

Here's a link to the list of classes for buttons in the lightning design system Button CSS Class Overview

I also found this code that helped with the controller in case you want to have more options like back and previous.

init : function(comp, event, helper) {
  var availableActions = comp.get('v.availableActions');
  for (var i = 0; i < availableActions.length; i++) {
     if (availableActions[i] == "BACK") {
        comp.set("v.canBack", true);
     } else if (availableActions[i] == "NEXT") {
        comp.set("v.canNext", true);
     } else if (availableActions[i] == "FINISH") {
        comp.set("v.canFinish", true);
     }
  }},



 onButtonPressed: function(comp, event, helper) {
  var actionClicked = event.getSource().getLocalId();
  var navigate = comp.get('v.navigateFlow');
  navigate(actionClicked); },

Then you could use aura:ifs

<div class="slds-float_right">
        <!-- If Pause, Next, or Finish are available, display to the right -->
        <aura:if isTrue="{!v.canBack}">
            <lightning:button aura:id="BACK" label="Previous"
                              variant="success" onclick="{!c.onButtonPressed}" />
        </aura:if>
        <aura:if isTrue="{!v.canNext}">
            <lightning:button aura:id="NEXT" label= "Next" 
                              variant = "inverse" onclick="{!c.onButtonPressed}"/>
        </aura:if>
        <aura:if isTrue="{!v.canFinish}">
            <lightning:button aura:id="FINISH" label="Done"
                              variant="inverse" onclick="{!c.onButtonPressed}" />
        </aura:if>
</div>

Hope it helps!