Prompt

The lightning:prompt library lets you create an prompt modal within your component. Use .openPrompt in your components to ask the user to provide information before they continue.

Use lightning:prompt instead of the native window.prompt() for a more consistent user experience. They have similar functions, but lightning:prompt works in cross-origin iframes, where the .prompt() method is no longer supported in Chrome and Safari. Unlike window.prompt(), .openPrompt 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 prompt has closed.

To create a prompt in your Aura component, import lightning:prompt, and call .openPrompt. Define the prompt’s style in the component helper.

1<aura:component>
2  <aura:import library="lightning:prompt" property="LightningPrompt" />
3  <lightning:button onclick="{! c.openPrompt }" label="Open Prompt" />
4</aura:component>

1/* c:myAppController.js */
2({
3  openPrompt: function (cmp, event, helper) {
4    helper.openPrompt(cmp, event);
5  },
6});

1/* c:myAppHelper.js */
2({
3  openPrompt: function (cmp, event) {
4    this.LightningPrompt.open({
5      message: "this is the prompt message",
6      variant: "headerless",
7      label: "Please Respond",
8      defaultValue: "default input value",
9    }).then(function (result) {
10      // result is input value if clicked "OK"
11      // result is null if clicked "Cancel"
12      console.log("prompt result is", result);
13    });
14  },
15});

This component uses the Salesforce Lightning Design System (SLDS) prompt blueprint .

lightning:prompt supports the following attributes:

• message: Message text that displays in the prompt.

• defaultValue: Optional. Initial leading text for the input text box.

• label: Header text, also used as the aria-label. Default string is “Prompt”.

• variant: Two values, header and headerless. Default value is header.

• theme: Color theme for the header. The theme attribute supports the following options from SLDS:

  • default: white
  • shade: gray
  • inverse: dark blue
  • alt-inverse: darker blue
  • success: green
  • info: gray-ish blue
  • warning: yellow
  • error: red
  • offline​: black

  If an invalid value is provided, lightning:prompt uses the default theme.