In summer 22, Salesforce released a new module LightningPrompt to create alert notifications in LWC components.
LWC Prompt Notification
SamplePromptNotification.html
<template>
<lightning-button onclick={handlePrompt} label="Open Prompt Modal">
</lightning-button>
</template>
SamplePromptNotification.js
import { LightningElement } from 'lwc';
import LightningPrompt from 'lightning/prompt';
export default class SamplePromptNotification extends LightningElement {
handlePrompt() {
LightningPrompt.open({
message: 'this is the prompt message',
//theme defaults to "default"
label: 'Please Respond', // this is the header text
defaultValue: 'initial input value', //this is optional
}).then((result) => {
//Prompt has been closed
//result is input text if OK clicked
//and null if cancel was clicked
});
}
}
SamplePromptNotification.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>
Sample Prompt screen:
Also found above code in Tech Shorts Git repo