Custom Label in Lightning Web Components

In this post we will learn about how to use Custom Labels in Lightning Web Components (LWC) and how to Share Custom labels between Lightning Web Components? 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.

Create Custom Labels

  1. Go to setup, search for a custom label in the quick find box.
  2. Create a custom label by clicking on New button.
  3. Enter a value for the Description, Name, and Value field and click on save button.

Import Custom Label in LWC

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.


    <lightning-card  title={label.title} variant="narrow" icon-name="standard:opportunity">
  • To use the labels in the template, use the same {property} syntax that you use to reference any JavaScript property


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 = {
  • Use import statement to get the label in Lwc.
  • Then Expose the labels to use in the template using property


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="">


Share Custom labels between Lightning Web Components

Now we know how to use custom label in lightning web components. What about if you have large list of labels and you want to to use in multiple LWC components? Let talk about best practice to import bulk custom label in LWC and how to create utility class to import same set of label in multiple Lightning web components.

You can create a utility component that imports all the labels and then exposes them bundled together in one object via a method. Then your main component will have a cleaner list of imports.

Step 1) Create Label Utility .

Create a Lightning web component that contains only a single Js file. Like below structure


Lets create one common label Utility component.

import header from '@salesforce/label/c.Header';
import title from '@salesforce/label/c.title';

const label = {
    header: header,
    title: title

export {label};
  • The module should only have a JS file & Metadata file in it, otherwise it will not work.
  • Just like with any Lightning web component, the folder name and the filename must be identical
  • Imports all the labels and then exposes them bundled together with export.

Step 2) How to use shared label Utility

Create new Lightning web component and import Js file with import statement like below

import { label  } from 'c/labelUtility';

Let see the full code.

import { LightningElement,track } from 'lwc';
import { label  } from 'c/labelUtility';
export default class CustomLabelDemo extends LightningElement {
    @track myLabel=label;
  • Import JS file with import
    <lightning-card  title={myLabel.title} variant="narrow" icon-name="standard:opportunity">

Please share your feedback and comment if there is any better way to implement or your like this post. If you want to learn about how to share Share CSS styles among Lightning Web Components check here.

Amit Chaudhary
Amit Chaudhary

Amit Chaudhary is Salesforce Application & System Architect and working on Salesforce Platform since 2010. He is Salesforce MVP since 2017 and have 17 Salesforce Certificates.

He is a active blogger and founder of Apex Hours.

Articles: 460


  1. Does this method cause labels to be loaded multiple times if separate components reference it?

  2. Thank you for this detailed guide on using Custom Labels in Lightning Web Components (LWC) and sharing them between components. Custom Labels are crucial for creating multilingual applications, and your step-by-step instructions make it easier for developers to understand and implement.

Leave a Reply

Your email address will not be published. Required fields are marked *