Close Quick Action Window in Lightning Web Component

Hello friends, In this post you will see an example that helps you to understand, how you can close a quick action window in lightning web component (LWC).

Close quick action in lightning web component

To close quick action in lwc you have to import CloseActionScreenEvent from lightning/actions. Then declare a simple function that executed from button. Let's see an example.

CloseQuickAction.html

 <template>
    <lightning-card title="Lightning Web Component">
        <div class="slds-align_absolute-center">
            <lightning-button onclick={closeQuickAction} variant="brand" label="Close Quick Action"
                class="slds-m-left_x-small"></lightning-button>
        </div>
    </lightning-card>
 </template>

CloseQuickAction.js

 import { LightningElement } from 'lwc';
 import { CloseActionScreenEvent } from 'lightning/actions';
 export default class CloseQuickAction extends LightningElement {
    closeQuickAction() {
        this.dispatchEvent(new CloseActionScreenEvent());
    }
 }

CloseQuickAction.js-meta.xml

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

Output:

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.

Thank you.