Lightning Modal in LWC

The LWC provides a lightning modal feature to show specific content in the modal popup. In most cases, the developer uses a custom modal popup instead of a lightning modal. Lightning modal reduces the complexity of conditionally rendering the popup in the component.

Step 1: First, create a LWC component that includes the modal popup feature.



        <lightning-modal-header label=’lightning modal’ >


                <lightning-icon icon-name=”action:approval” 








                    <div style=”margin-left:1cm;margin-right:1cm”>


                        style=”font-size:15px;”>Lightning modal popup







            <lightning-button label=”OK” variant=”brand” 





import { api } from ‘lwc’;

import LightningModal from ‘lightning/modal’;

export default class ModalPopup extends LightningModal {

      handleOkay() {




Step 2: Now create your target component that you are going to work with in the modal popup.






                label=”Open My Modal”>


                    <p>Result: {result}</p>


Step 3: You have to import the modal pop component into the target component as mentioned.

  below, then only we can use the modal mopup feature.


import { LightningElement } from ‘lwc’;

import MyModal from ‘c/modalPopup’;

export default class ModalPopup2 extends LightningElement {


async handleClick() {

this.result = await{

                   size: ‘small’,

            description: ‘Accessible description of modal\’s purpose’,





Note: If we show the modal popup in the component, then we access the modal popup result in the target component.

  • If you click OK,  then the result will be okay.
  • If you click the icon, then the result would be undefined.

        We can work with these values on the target component.

        This lightning modal has only three layout sizes:small, medium, and large.

        If you want to customize the modal window size, then go with a custom modal popup.


From the target component: