In summer 22, Salesforce released a new module LightningAlert to create alert notifications in LWC components.
LWC Alert Notification
SampleAlertNotification.html
<template>
<lightning-button onclick={handleAlert} label="Open Alert Modal">
</lightning-button>
</template>
SampleAlertNotification.js
import { LightningElement } from 'lwc';
import LightningAlert from 'lightning/alert';
export default class SampleAlertNotification extends LightningElement {
async handleAlert() {
await LightningAlert.open({
message: 'this is a sample alert message',
theme: 'error',
label: 'Error!',
});
}
}
SampleAlertNotification.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 alert screen:
Also found above examples in Tech Shorts Git repo
Source:
https://developer.salesforce.com/docs/component-library/bundle/lightning-alert/documentation