Show alerts using Lightning Web Componets(LWC)

This post explains how to create the notifications alerts using lightning web components(lwc).

lightning/alert module lets you create an alert modal within your component. Use LightningAlert on your components to communicate a state that affects the entire system, not just a feature or page.

HTML

<template>
	<div class="slds-align_absolute-center slds-theme_default">
		<lightning-button-group>
			<lightning-button label="Default" title="default" onclick={handleClick}></lightning-button>
			<lightning-button label="Shade Alert" title="shade" onclick={handleClick}></lightning-button>
			<lightning-button label="Inverse Alert" title="inverse" onclick={handleClick}></lightning-button>
			<lightning-button label="Alt-inverse Alert" title="alt-inverse" onclick={handleClick}></lightning-button>
			<lightning-button label="Success Alert" title="success" onclick={handleClick}></lightning-button>
			<lightning-button label="Info Alert" title="info" onclick={handleClick}></lightning-button>
			<lightning-button label="Warning Alert" title="warning" onclick={handleClick}></lightning-button>
			<lightning-button label="Error Alert" title="error" onclick={handleClick}></lightning-button>
			<lightning-button label="Offline Alert" title="offline" onclick={handleClick}></lightning-button>
		</lightning-button-group>
	</div>
</template>

Javascript

import { LightningElement } from 'lwc';
import LightningAlert from 'lightning/alert';

export default class LightningAlerts extends LightningElement {

    handleClick(event) {
        if (!event.currentTarget.title) return;
        let themeType = event.currentTarget.title;
        let msg = 'This is test alert';
        switch (themeType) {
            case 'shade':
                this.showAlerts(msg, 'shade', 'Hey Salesforce!!');
                break;
            case 'inverse':
                this.showAlerts(msg, 'inverse', 'Hey Salesforce!!');
                break;
            case 'alt-inverse':
                this.showAlerts(msg, 'alt-inverse', 'Hey Salesforce!!');
                break;
            case 'success':
                this.showAlerts(msg, 'success', 'Hey Salesforce!!');
                break;
            case 'info':
                this.showAlerts(msg, 'info', 'Hey Salesforce!!');
                break;
            case 'warning':
                this.showAlerts(msg, 'warning', 'Hey Salesforce!!');
                break;
            case 'error':
                this.showAlerts(msg, 'error', 'Hey Salesforce!!');
                break;
            case 'offline':
                this.showAlerts(msg, 'offline', 'Hey Salesforce!!');
                break;
            default:
                this.showAlerts(msg, '', 'Hey Salesforce!!');
        }

    }

    async showAlerts(msg, theme, label) {
        await LightningAlert.open({
            message: msg,
            theme: theme,
            label: label
        });
    }
}

Config Meta file

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>54.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
		<target>lightning__AppPage</target>
		<target>lightning__HomePage</target>
		<target>lightning__Tab</target>
	</targets>
</LightningComponentBundle>

Demo