How to Use LightningAlert, LightningConfirm, and LightningPrompt in Salesforce LWC

In plain words: Salesforce provides standard notification modules—LightningAlert, LightningConfirm, and LightningPrompt—as modern, asynchronous replacements for native browser popup dialogs (window.alert(), window.confirm(), and window.prompt()) with native Lightning Design System (SLDS) styling and mobile compatibility.

Native browser dialogs are blocking, visually inconsistent across browsers, and unsupported in mobile environments like the Salesforce Mobile App. Modern LWC development uses dedicated asynchronous notification modules from lightning/alert, lightning/confirm, lightning/prompt, alongside standard toast messages via lightning/platformShowToastEvent.

Prerequisites

• A Salesforce Developer Edition, Sandbox, or Scratch Org.
• Salesforce CLI (sf) configured and authenticated to your org.
• Understanding of JavaScript ES6 async/await and Promise handling in LWC.

Step 1: Create the Notification Component

Generate the LWC bundle via Salesforce CLI:

sf lightning generate component -n notificationDemo -d force-app/main/default/lwc --type lwc

Step 2: Build the HTML Template

In notificationDemo.html, create interactive buttons to trigger alerts, confirmation dialogs, input prompts, and toast banners:

<template>
    <lightning-card title="Modern LWC Notification Modals" icon-name="utility:notification">
        <div class="slds-p-around_medium">
            
            <div class="slds-m-bottom_medium">
                <p class="slds-text-body_regular slds-m-bottom_small">
                    Test standard modal dialogs and toast event notifications:
                </p>
                
                <div class="slds-button-group" role="group">
                    <lightning-button 
                        variant="destructive" 
                        label="Open Alert" 
                        onclick={handleAlertClick}>
                    </lightning-button>
                    <lightning-button 
                        variant="brand" 
                        label="Open Confirm" 
                        onclick={handleConfirmClick}>
                    </lightning-button>
                    <lightning-button 
                        variant="neutral" 
                        label="Open Prompt" 
                        onclick={handlePromptClick}>
                    </lightning-button>
                    <lightning-button 
                        variant="success" 
                        label="Show Toast" 
                        onclick={handleToastClick}>
                    </lightning-button>
                </div>
            </div>

            <!-- Output Display Area -->
            <div class="slds-box slds-theme_shade">
                <h3 class="slds-text-heading_small slds-m-bottom_xx-small">Action Response Log:</h3>
                <p class="slds-text-body_regular">
                    Status: <strong class="slds-text-color_success">{actionResult}</strong>
                </p>
            </div>

        </div>
    </lightning-card>
</template>

Step 3: Implement Modal & Toast Logic in JavaScript

In notificationDemo.js, import LightningAlert, LightningConfirm, LightningPrompt, and ShowToastEvent. Each modal function returns a Promise that resolves when the user interacts with the dialog:

import { LightningElement } from 'lwc';
import LightningAlert from 'lightning/alert';
import LightningConfirm from 'lightning/confirm';
import LightningPrompt from 'lightning/prompt';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class NotificationDemo extends LightningElement {
    actionResult = 'No actions executed yet.';

    // 1. Lightning Alert Modal (Replaces window.alert)
    async handleAlertClick() {
        await LightningAlert.open({
            message: 'Your system integration token has expired. Please re-authenticate.',
            theme: 'error', // 'default', 'error', 'warn', 'info', 'success'
            label: 'Authentication Alert'
        });
        this.actionResult = 'User acknowledged the Alert dialog.';
    }

    // 2. Lightning Confirm Modal (Replaces window.confirm)
    async handleConfirmClick() {
        const result = await LightningConfirm.open({
            message: 'Are you sure you want to permanently delete this opportunity record?',
            variant: 'headerless',
            label: 'Delete Confirmation',
            theme: 'warning'
        });
        
        // result returns true (OK) or false (Cancel)
        this.actionResult = result ? 'User confirmed: Record Deleted.' : 'User clicked Cancel.';
    }

    // 3. Lightning Prompt Modal (Replaces window.prompt)
    async handlePromptClick() {
        const result = await LightningPrompt.open({
            message: 'Please provide a reason for closing this case:',
            label: 'Case Resolution Note',
            defaultValue: 'Resolved during first contact',
            theme: 'alt-inverse'
        });

        // result returns entered text string or null (if cancelled)
        if (result !== null) {
            this.actionResult = `Prompt Response: "${result}"`;
        } else {
            this.actionResult = 'Prompt dismissed without submitting.';
        }
    }

    // 4. Standard Lightning Toast Banner
    handleToastClick() {
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Data Synchronized',
                message: 'All account records updated successfully.',
                variant: 'success'
            })
        );
        this.actionResult = 'Success Toast banner dispatched.';
    }
}

Warning Trap: Never use native JavaScript popups like window.alert() or window.confirm() in Lightning Web Components. Salesforce Lightning Locker and Lightning Web Security (LWS) restrict synchronous native browser dialogs because they freeze the main execution thread and break mobile layout rendering.

360 Architecture Summary:

• LightningAlert: Displays a non-blocking modal message; resolves with Promise<void> when closed.
• LightningConfirm: Prompts the user with OK and Cancel choices; resolves with a boolean (true or false).
• LightningPrompt: Captures single-line string input; resolves with the entered String value or null if dismissed.
• ShowToastEvent: Displays a non-modal auto-dismissing banner notification at the top of the viewport.

Step 4: Configure Metadata and Deploy

Update notificationDemo.js-meta.xml to expose the component to Lightning App Builder:

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

Deployment & Testing:

# Deploy component to your target org
sf project deploy start

# Open org in browser
sf org open

• Open Setup > Lightning App Builder.
• Place notificationDemo on an App or Record page, save, and activate.
• Click each button to test Alert, Confirm, Prompt, and Toast responses.

Core Takeaway: Using LightningAlert, LightningConfirm, and LightningPrompt provides asynchronous, accessible, and SLDS-compliant dialogs that work seamlessly across desktop and mobile Salesforce experiences.