Categories Salesforce
How to create an Alert, Confirm, and Prompt in LWC?
Create notifications, confirmations, and prompts in Lightning web components using LightningAlert, LightningConfirm, and LightningPrompt.
To create an Alert, Confirm, and Prompt using Lightning Web Components in Salesforce, you can use the following modules:
- LightningAlert
- LightningConfirm
- LightningPrompt
Alert
The LightningAlert module creates a modal with a message and an “OK” button. The following code shows how to create an alert:
<!-- c/myApp.html -->
<template>
<lightning-button onclick={handleAlertClick} label="Open Alert Modal">
</lightning-button>
</template>
import { LightningElement } from 'lwc';
import LightningAlert from 'lightning/alert';
export default class MyApp extends LightningElement {
async handleAlertClick() {
await LightningAlert.open({
message: 'this is the alert message',
theme: 'error', // a red theme intended for error states
label: 'Error!', // this is the header text
});
//Alert has been closed
}
}
Source:
https://developer.salesforce.com/docs/component-library/bundle/lightning-alert/documentation: How to create an Alert, Confirm, and Prompt in LWC?Confirm
The LightningConfirm module creates a modal with a message, an “OK” button, and a “Cancel” button. The following code shows how to create a confirm:
<!-- c/myApp.html -->
<template>
<lightning-button onclick={handleConfirmClick} label="Open Confirm Modal">
</lightning-button>
</template>
import { LightningElement } from 'lwc';
import LightningConfirm from 'lightning/confirm';
export default class MyApp extends LightningElement {
async handleConfirmClick() {
const result = await LightningConfirm.open({
message: 'this is the prompt message',
variant: 'headerless',
label: 'this is the aria-label value',
// setting theme would have no effect
});
//Confirm has been closed
//result is true if OK was clicked
//and false if cancel was clicked
}
}
Source:
https://developer.salesforce.com/docs/component-library/bundle/lightning-confirm/documentation: How to create an Alert, Confirm, and Prompt in LWC?Prompt
The LightningPrompt module creates a modal with a text input field, an “OK” button, and a “Cancel” button. The following code shows how to create a prompt:
<!-- c/myApp.html -->
<template>
<lightning-button onclick={handlePromptClick} label="Open Prompt Modal">
</lightning-button>
</template>
import { LightningElement } from 'lwc';
import LightningPrompt from 'lightning/prompt';
export default class MyApp extends LightningElement {
handlePromptClick() {
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
});
}
}
Source:
https://developer.salesforce.com/docs/component-library/bundle/lightning-prompt/documentation: How to create an Alert, Confirm, and Prompt in LWC?
