Leveraging Custom Labels in Lightning Web Components – LWC

Here’s a code snippet illustrating the utilization of custom labels in Lightning Web Components.

Suppose we have custom labels named welcomeText and exitText. In the LWC’s JavaScript file, we need to adhere to the following syntax:

// CustomlabelExample.js
import { LightningElement } from 'lwc';
  
// Import custom labels
import welcomeText from '@salesforce/label/c.welcomeText';
import exitText from '@salesforce/label/c.exitText'
 
export default class CustomLabelExample extends LightningElement {
 
    // Expose the labels to use in the template.
    label = {
        welcomeText,
        exitText
    };
}

Take note of how we imported the label and utilized ‘c.’ if there is no namespace.

import welcomeText from '@salesforce/label/c.welcomeText';

<!-- CustomlabelExample.html -->
<template>
    Hi , {label.welcomeText} !!!
   <!-- some more code -->
   Sorry to see you going, {label.exitText}
</template>