+ Start a Discussion
Hermann OuréHermann Ouré 

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


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 isTrue="{!v.currentCaseRecordType=='Incident'}"> 
            <lightning:button variant="destructive"
                              label="Raise a Concern" class="concern"
                              title="Raise a Concern"
                              onclick="{! c.concernModalOpen }" 

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

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.
Hello Herman,
I am facing the same issue, have you found the solution.
Hermann OuréHermann Ouré
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"
                              title="Raise a Case Concern"
                              onclick="{! c.concernModalOpen }"
Then I have create a style component to change the color:
.THIS .concern {
    color: #ffffff;

.THIS .concern:hover,
.THIS .concern:active {

.THIS .concern:disabled {
    cursor: not-allowed;

Hope this help.