Kishore
Kishore I am a Salesforce developer and a so-called blogger at SalesforceLwc.in. I love learning and sharing.

Change colors for lightning-button with css styling hooks

Change colors for lightning-button with css styling hooks

Now we can customize CSS for standard lightning base components using styling hooks.

What are Styling Hooks

Styling hooks use CSS custom properties which make it easy to customize component styling. We can use CSS Custom Properties as hooks to customize the SLDS component with your style.

Where can I find Styling Hooks?

You can find styling hooks for base lightning components on the SLDS website. For example to find styling hooks for lightning-button base components navigate to Lightning Component Library and in the documentation section, you can find “Customize Component Styling” here you will find styling hooks for that component as shown below.

Sample Styling Hooks

How does a Styling Hook look like

--sds-c-button-brand-color-background : violet;

SLDS Styling Hooks

How to use a Styling Hooks

Styling hooks can be used in many ways, have a look at the example below

<template>
	<lightning-button class="button" variant="brand" label="Custom" title="custom"></lightning-button>
</template>
lightning-button.button {
	--sds-c-button-brand-color-background: #bb00ff;
    --sds-c-button-text-color: #f4f7f9;
}

Customised lightning-button

In the above example, I aim to change the lightning-button color to violet.

Learn more about styling hooks

Reference links