top of page
  • Writer's pictureAvi Rai

Lightning Modal module in LWC

What is Modal?

A modal overlays a popup on top of the current app window. This paradigm is used in cases such as the creation or editing of a record, as well as various types of messaging and wizards. A modal is triggered by user interaction, which can be a click of a button or link. The user must then interact with the modal before regaining control over the app window.

Current practice to create a modal in LWC

We use Lightning Design System and Overlay Library to create modals currently. They work perfectly however we have to write a lot of lines of code to get the work done.

LightningModal module

With the Winter'23 release, we now have a Lightning Modal module that we can directly use to create a modal in LWC with very minimum effort and fewer lines of code. It implements the SLDS modal blueprint. There is no lightning-modal component. Instead, you create a modal by extending LightningModal and using the helper lightning-modal-* components to provide a header, footer and the body of the modal.

The component has access to the normal LWC resources as well as the special container, helper components, methods, and events of the lightning/modal module.

Play with it

  1. import LightningModal from lightning/modal

  2. The modal’s HTML template uses helper lightning-modal-* components to provide a header, footer, and the body of the modal. The lightning-modal-body component is required for the modal template.

  3. Open a modal instance - LightningModal provides an .open() method. Each invocation of a modal component’s .open() method creates a unique instance of the modal. The .open() method lets you assign values to the modal's properties - [label, size, description, disableClose].

  4. Close a modal instance - Use this.close(result) to close the modal, where the result is anything you want to return from the modal. You can also close the modal with the default close button, the X at the top right corner. Closing a modal like this is the same as calling this.close() with an undefined result, so any data input is lost.

Example - An LWC myModal using Lightning Modal that is used to create an Account record. It is called from a parent LWC myComponent.

myComponent - It comprises a button Create Account which creates an instance of myModal using .open() method with the properties size and description. It also displays the result passed by myModal on close.


    <lightning-button label="Create Account" onclick={openAccountModal}></lightning-button>
    <p>Result : {result}</p>


import { LightningElement } from 'lwc';
import MyModal from 'c/myModal';

export default class MyComponent extends LightningElement {
    async openAccountModal() {
        this.result = await{
            size: 'medium',
            description: 'Gets the Account data and creates Account record'

myModal - It extends the LightningModule and uses lightning-modal-* components for header, footer and body of the modal. It creates the account record and on close returns the Id of the account created to the parent component.


    <lightning-modal-header label="Create Account"></lightning-modal-header>
      <lightning-record-edit-form object-api-name="Account" onsuccess={handleSuccess}>
        <lightning-input-field field-name="Name"></lightning-input-field>
      <lightning-button label="Submit" onclick={createAccount}></lightning-button>


import LightningModal from 'lightning/modal';

export default class MyModal extends LightningModal {

    createAccount() {

    handleSuccess(event) {
        const createdRecord =;
        console.log('onsuccess: ', createdRecord);

Thanks for reading and keep learning!

5,530 views0 comments

Recent Posts

See All

What are Platform Events? Platform events are the event messages (or notifications) that your apps send and receive to take further action. They simplify the process of communicating changes and respo

Hello everyone, We know that there are two methods to call an Apex method from a Lightning Web Component: Wire Apex Methods to Lightning Web Components Call Apex Methods Imperatively When calling apex

Post: Blog2_Post
bottom of page