How to update lightning-button CSS in Salesforce Lightning Web Component(LWC)?

HomeInfallibleTechie Admin

How to update lightning-button CSS in Salesforce Lightning Web Component(LWC)?

InfallibleTechie Admin

Styling Hooks can be used to adjust CSS properties like the height and width of the lightning-button in Salesforce Lightning Web Component.

Sample Code:
HTML:

<template>  
    <lightning-card title="Testing Lightning Button">
        <lightning-button
            label="Test Button"
            variant="base">
        </lightning-button>
    </lightning-card>
</template>

JavaScript:
import { LightningElement } from ‘lwc’;

export default class SampleLWC extends LightningElement {

}

CSS:
:host {
–slds-c-button-sizing-border: 3px;
–slds-c-button-color-border: black;
–slds-c-button-spacing-block-end: 1rem;
–slds-c-button-spacing-block-start: 1rem;
–slds-c-button-spacing-inline-end: 1rem;
–slds-c-button-spacing-inline-start: 1rem;
}

JS-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

Output:

Leave a Reply