Prompt Modals

Use a prompt modal to ask users to provide information before they continue. The prompt is displayed in a dialog on top of the page content using an overlay.

To display a prompt in Lightning Experience, import LightningPrompt from the lightning/prompt module, and call LightningPrompt.open() with your desired attributes.

LightningPrompt is an alternative to the native window.prompt() function, which isn’t supported for cross-origin iframes in Chrome and Safari. Unlike the native prompt function, LightningPrompt.open() doesn’t halt execution on the page, it returns a Promise. Use async/await or .then() for any code you want to execute after the modal is closed.

A prompt notification with a striped gray header and a text input box over a darkened org.

This example component creates a button that opens the prompt modal UI that you see in the screenshot.

1<!-- c/myApp.html -->
2<template>
3  <lightning-button 
4      onclick={handlePromptClick} 
5      label="Open Prompt Modal"> 
6  </lightning-button>
7</template>

Import LightningPrompt from lightning/prompt in the JavaScript file of the component that opens the prompt modal. Create and dispatch a LightningPrompt event with message, theme, label, and defaultValue attributes. If the user enters text and clicks OK in the prompt, the .open() function returns a promise that resolves to the input value. If the user clicks Cancel, the function returns a promise that resolves to null.

1import { LightningElement } from "lwc";
2import LightningPrompt from "lightning/prompt";
3
4export default class MyApp extends LightningElement {
5  handlePromptClick() {
6    LightningPrompt.open({
7      message: "This is the prompt message.",
8      //theme defaults to "default"
9      label: "Please Respond!", // this is the header text
10      defaultValue: "Optional initial input value",
11    }).then((result) => {
12      // prompt modal has been closed
13    });
14  }
15}

The lwc-recipes repo has a miscNotificationModules component that demonstrates prompt modals.

Tip

For information about the attributes for LightningPrompt, see the [Component Reference](https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-prompt?type=Specifications.

See Also

Component Reference: lightning/prompt