Custom Label in Lightning Web Components (LWC)

In this post we will talk about how to use custom label in lightning web components (LWC). Custom labels are text values stored in Salesforce that can be translated into any language that Salesforce supports. We use custom labels to create multilingual applications. Let see how to access custom Label in Lightning Web Components.

To import a label in a Lightning Web Component, use @salesforce/label in an import statement

import labelName from '@salesforce/label/label-reference';

1. labelName: It is name that refers to the label in LWC.
2. labelReference: The name of the label in your org.
   

Custom Labels In Lightning Web Component(LWC) Example

create lightning web component in your sandbox or developer org.

customLabelDemo.html

<template>
    <lightning-card  title={label.title} variant="narrow" icon-name="standard:opportunity">
        <p>{label.header}</p>
    </lightning-card>
</template>

• To use the labels in the template, use the same {property} syntax that you use to reference any JavaScript property

customLabelDemo.js

import { LightningElement } from 'lwc';
import header from '@salesforce/label/c.Header';
import title from '@salesforce/label/c.Title';
export default class CustomLabelDemo extends LightningElement {

    label = {
        header,
        title
    };
}

• Use import statement to get the label in Lwc.
• Then Expose the labels to use in the template using property
  

customLabelDemo.js-meta.xml

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

Result