Create Quick Actions with Lightning Web Components (Generally Available)

To save your users time and clicks, create a quick action that invokes a Lightning web component. On a record page, create a screen action that shows the component in a window, or create a headless action that executes with a click.

Where: This change applies to Lightning Experience desktop in Developer, Enterprise, Essentials, Professional, and Unlimited editions.

Why: Make the custom component that’s essential to your users’ workflow easier to access. For example, your users often upload receipts to records, so you create a custom lightning-file-upload component that prompts them to upload a .png file. This component works well, but requires users to open the object’s page to access it. If you define the component as a screen action, your users can click the quick action and upload the receipt in a pop-up window without leaving the page.

How: To set up a Lightning web component as a quick action on a record page, define the metadata in <component>.js-meta.xml. Define a lightning__RecordAction target and specify actionType as ScreenAction for a screen action that opens in a window or Action for a headless action that executes when clicked. Here’s the configuration for a headless action.

<?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__RecordAction</target>
   </targets>
    <targetConfigs>
   <targetConfig targets="lightning__RecordAction">
     <actionType>Action</actionType>
   </targetConfig>
 </targetConfigs>
</LightningComponentBundle>

To use a headless action, add an exposed invoke() method to your component.

import { LightningElement, api } from "lwc";
 
declare default class HeadlessSimple extends LightningElement {
  @api invoke() {
    console.log("Hi, I'm an action.");
  }
}
Note

Note

LWC quick actions are currently supported only on record pages.