Example: I understand we can achieve by using slds button base component but any other way directly to achieve through lwc.

<lightning-button label="Neutral" title="My Title" disabled class="myClass"></lightning-button>
  • can you add the content of your CSS class myClass? Sep 16, 2021 at 16:00

1 Answer 1


In lwc documentation you can find this statement about css hooks.

Use SLDS styling hooks to customize the component's styles. For example, specify the background color on the button with brand variant using the --sds-c-button-brand-color-background custom property.

Sample snippet:

.myClass {
    --sds-c-button-brand-color-background-disabled: purple;

In your browser, if you would inspect the button, you could find the right css variable.

enter image description here

  • That would work for normal buttons background color change but he wants to change the color for a disabled button. So your code snippet would change the color if the button is not disabled not in disabled case. Sep 16, 2021 at 16:56
  • with the disabled it works the same, i updated my answer to show that
    – Damecek
    Sep 16, 2021 at 17:24
  • 1
    important to use the right hook - in your example it only works for a brand button (ex. lightning button variant="brand") which OP doesn't seem to be using. Default, if you don't set a variant, is neutral so button-neutral-color-background-disabled. See example. Sep 16, 2021 at 18:07
  • Cool, much appreciated but do these styling hooks work in production and is it safe to use them? Sep 17, 2021 at 4:20
  • it has been provided by salesforce developer.salesforce.com/docs/component-library/documentation/… , so it's very much safe to use. Sep 17, 2021 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.