Create Alert Notifications In Lightning web components

 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:

error-notification

Also found above examples in Tech Shorts Git repo

Source:
https://developer.salesforce.com/docs/component-library/bundle/lightning-alert/documentation

Labels:
LWC
Join the conversation