function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Hermann OuréHermann Ouré 

Change text and Icon color (CSS) for a lightning button

Hi,

I have created a lightning button called "Raise a concern" but I would like to change the color of the text and the Icon, but when using Style in the component style, I am unale to change the color.

Here is the bit of code 
</aura:if>
        <aura:if isTrue="{!v.currentCaseRecordType=='Incident'}"> 
             
            <lightning:button variant="destructive"
                              label="Raise a Concern" class="concern"
                              iconName="utility:priority"
                              iconPosition="left"
                              title="Raise a Concern"
                              onclick="{! c.concernModalOpen }" 
                              disabled="{!if(v.currentCaseCaseConcern>0,'true','false')}"/>
        </aura:if>      

Could someone Help?
ThanksUser-added image

 

Devi ChandrikaDevi Chandrika (Salesforce Developers) 
Hi Hermann,
In your lightning button variant is given as destructive that is why the button is in red colour.Remove that variant as destructive and use a different variant according to your requirement.

Please refer below link which might help you in this
https://developer.salesforce.com/docs/component-library/bundle/lightning:button/example#lightningcomponentdemo:exampleRegularButtons

Hope this helps you
Let me know if this helps you. Kindly mark it as solved so that it may help others in future.

Thanks and Regards
Hermann OuréHermann Ouré
Hi @Devi Chandrika,

Thank you for your reply.

Ok but let's say, I want to change the colour of the button in orange and change the flag icon in Red and the text "Raise a Concern" in White.
The link do not tell me how to customize my button in any color I want.
rushirushi
Hello Herman,
I am facing the same issue, have you found the solution.
Hermann OuréHermann Ouré
@Rushi,
Yes, instead of using a variant "lightning:button variant="destructive"
I have just used lightning:button with a label and a class 
<aura:if isTrue="{!v.currentCaseRecordType=='Incident'}"> 
             
            <lightning:button label="Raise a Case Concern" class="concern"
                              iconName="utility:warning"
                              iconPosition="left"
                              title="Raise a Case Concern"
                              onclick="{! c.concernModalOpen }"
                              disabled="{!if(v.currentCaseCaseConcern>0,'true','false')}"/>
        </aura:if>
Then I have create a style component to change the color: 
.THIS .concern {
    color: #ffffff;
    background-color:#f0c63e; 
}

.THIS .concern:hover,
.THIS .concern:active {
    background-color:#f0b73e;
}

.THIS .concern:disabled {
    background-color:#c9c7c5;
    cursor: not-allowed;
}

Hope this help.