How to use Custom Labels in Lightning Web Components

Custom Labels are text values that can be translated into any language that salesforce supports. We can use custom labels to represent help text or error messages to the users in their native language. Custom labels can be fetched from apex class, visualforce pages, aura components, and LWC (Lightning Web Components).

Create a custom label:

1. Go to setup, search for a custom label in the quick find box and select it.
2. Create a custom label by clicking on the ”New Custom Label” button and the following window will be opened:
   
3. Enter a value for the Description, Name, and Value field in the above screenshot and click on the save button, the label will be saved.

Use Custom Labels in LWC:

1. Import custom labels in component’s javascript file:
   • import labelName from ‘@salesforce/label/LabelReference’;
     labelName – This is the name that we use to access labels in LWC.
     LabelReference – This is the name of the custom label. For example, If we have a namespace, then LabelReference -> Namespace.Webner_Logo_Description, otherwise LabelReference ->Webner_Logo_Description.
2. Here is the sample code of the javascript file of LWC(customLabel.js):
   import { LightningElement } from 'lwc';
// importing Custom Label
import webnerLogo from '@salesforce/label/Webner_Logo_Description; //Org without namespace
export default class CustomLabel extends LightningElement {
webnerLogoLabel = webnerLogo;
}
3. Component file (customLabel.html):
   <template>
<lightning-card title={webnerLogoLabel } variant="narrow">
<p>This is the Webner Logo Description!</p>
</lightning-card>
</template>