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}" />



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

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


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


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

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

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

Any help is greatly appreciated!

1 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 isTrue="{!v.canNext}">
            <lightning:button aura:id="NEXT" label= "Next" 
                              variant = "inverse" onclick="{!c.onButtonPressed}"/>
        <aura:if isTrue="{!v.canFinish}">
            <lightning:button aura:id="FINISH" label="Done"
                              variant="inverse" onclick="{!c.onButtonPressed}" />

Hope it helps!

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .