How to Customize Colors of lightning-button?

Question

I attempted to customize the colors by adding the following CSS:

.my-button {
    background-color: #14a6bc;
    color: #ffffff;
}

I then applied the my-button class to my <lightning-button> component and removed the variant attribute. However, the button still displays the default base colors.
Is there a way to override the default styles for lightning-button to achieve the custom colors I need?

Answer

When trying to customize the colors of a lightning-button, you may encounter issues because the styles defined in a component’s CSS file are scoped to the component itself. These scoped styles cannot target the child elements inside the lightning-button component, as Salesforce adds unique namespaces to isolate the styles.

If you need to override the default styles and apply your custom colors, you can use the following approach:

Using an External Stylesheet

Create an external CSS file and define your styles there. For example:

CustomExternalStyles.css

.my-button > button {  
    background-color: #14a6bc;  
    color: #ffffff;  
}  

Load this external CSS file into your Lightning Web Component (LWC). Use the @salesforce/resourceUrl to reference the file and loadStyle from lightning/platformResourceLoader to apply it dynamically.

myComponent.js

import { LightningElement } from 'lwc';  
import customStyles from '@salesforce/resourceUrl/CustomExternalStyles';  
import { loadStyle } from 'lightning/platformResourceLoader';  

export default class MyComponent extends LightningElement {  
    connectedCallback() {  
        loadStyle(this, customStyles)  
            .then(() => {  
                console.log('Styles loaded successfully.');  
            })  
            .catch(error => {  
                console.error('Error loading styles:', error);  
            });  
    }  
}  

Now, in your component’s HTML file, apply the custom class to the lightning-button tag:

myComponent.html

<template>  
    <lightning-button class="my-button" label="My Button"></lightning-button>  
</template>  

The custom styles from your external stylesheet will be applied to the inner <button> element rendered by the lightning-button component.

Why Does This Work?

By defining styles in an external stylesheet, you avoid the component-specific scoping mechanism that Salesforce applies to internal stylesheets. This allows your CSS to directly target the inner elements of the lightning-button.

Alternate Solutions

If you’re working in environments where using external stylesheets isn’t feasible, you may use lightning-button variants or replace it with a standard <button> and manually style it. However, these alternatives might not provide the same level of flexibility or the native benefits of lightning-button.

Job-Oriented Salesforce Training with 100% Money Back Guarantee

Our Salesforce Course is meticulously structured to provide a deep understanding of the Salesforce platform, enabling you to master the essential skills needed to excel in the CRM industry. The curriculum covers key areas like Salesforce Admin, Developer, and AI, combining foundational concepts with hands-on learning. Through real-world projects and practical tasks, you’ll build the confidence and expertise required to tackle complex business challenges using Salesforce solutions. With guidance from expert instructors, you’ll gain both technical knowledge and industry-focused insights to succeed in the Salesforce domain.

In addition to technical training, our Salesforce Training in Florida offers personalized mentorship, certification assistance, and interview preparation to elevate your career prospects. Participants benefit from extensive study resources, live project experience, and dedicated support throughout the course. By the program’s conclusion, you’ll be ready to ace certification exams and possess the practical problem-solving skills valued by employers. Embark on your Salesforce journey with us and explore a future full of career opportunities. Sign up for a Free Demo today!