---
schema_version: "1"
id: b230e886d23f9175f044312abd642d307ff03ae670aaa31429ab2ee74b6066fd
title: Prompt
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/prompt/lightning-prompt.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-prompt.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 1f5494fa32dc86d74e3d468970fd0a06d68aeca2b23e3ac6e5e09d8843d6dc87
products:
  - Lightning Component Reference
---

# Prompt

**`lightning-prompt`**

Create a prompt modal within your component that asks the user to provide information before they continue.

**For Use In**

Lightning Experience, Experience Builder Sites, Lightning Out (Beta), Standalone Lightning App

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="prompt" model="lwc" namespace="lightning"}


:::::

:::::tab

The `lightning/prompt` module provides the `LightningPrompt` component to create a prompt modal within your component. Use `LightningPrompt` on a component to ask the user to provide information before they continue.

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

## Design

`lightning/prompt` implements the prompt blueprint in the Salesforce Lightning Design System (SLDS). The prompt adapts to SLDS 1 or SLDS 2 styling based on the org's theme or the container app that you use.

|                | SLDS 1                                                                                         | SLDS 2                                                                                                          |
| :------------- | :--------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------- |
| **Design**     | [Prompt](https://v1.lightningdesignsystem.com/components/prompt/)                              | [Prompt](https://www.lightningdesignsystem.com/components/prompt/)                                              |
| **For Use In** | Lightning Experience, Experience Builder sites, Lightning Out (Beta), Standalone Lightning app | [Lightning Experience](https://help.salesforce.com/s/articleView?id=xcloud.customize_ui_enhancedlex.htm&type=5) |

## Usage

Import `LightningPrompt` from the `lightning/prompt` module in the component that opens the prompt modal, and call `LightningPrompt.open()` with your desired attributes.

This example creates a prompt modal with a header, message, and two buttons. If you enter text and click **OK** in the prompt, the `.open()` function returns a promise that resolves to the input value. If you click **Cancel**, the function returns a promise that resolves to `null`.

<!-- prettier-ignore-start -->
```html
<!-- c/myApp.html -->
<template>
    <lightning-button onclick={handlePromptClick} label="Open Prompt Modal">
    </lightning-button>
</template>
```
<!-- prettier-ignore-end -->

```javascript
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
    });
  }
}
```

`LightningPrompt` supports these 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`: See the [Variants](#variants) section.
- `theme`: See the [Themes](#themes) section.

## Component Styling

Use a combination of variants, themes, and utility classes to customize your prompts.

### Variants

Specify the `variant` attribute with one of these values.

- `header` is the default variant, which displays the prompt with header text
- `headerless` displays the prompt without header text

### Themes

Specify the `theme` attribute for the prompt header with one of these color [options](https://v1.lightningdesignsystem.com/utilities/themes) 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, `LightningPrompt` uses the `default` theme. `LightningPrompt` ignores the `style` attribute.

### Utility Classes

To apply additional styling, use the SLDS [utility classes](https://v1.lightningdesignsystem.com/utilities/alignment) with the `class` attribute.

## Test Your Prompt

Code using `LightningPrompt` can be tested by mocking the `LightningPrompt.open()` method.

This example uses a button to open a prompt dialog and sets the result in a template.

<!-- prettier-ignore-start -->
```html
<button data-button onclick={handleClick}>Open Prompt</button>
<div data-result>{result}</div>
```
<!-- prettier-ignore-end -->

```js
import LightningPrompt from 'lightning/prompt';
jest.mock('lightning/prompt');
​
test(() => {
    // Create and appendChild(element)
​
    const buttonEle = element.shadowRoot.querySelector('[data-button]');
    const resultEle = element.shadowRoot.querySelector('[data-result]');
​
    // Mock .open()
    // Pass string representing input text if testing when user clicks "OK"
    // Pass null if testing when user clicks "Cancel"
    LightningPrompt.open = jest.fn().mockResolvedValue('test value');
    // Initial value
    expect(resultEle.textContent).toBe('unknown');
    // Click modal open button
    buttonEle.click();
​
    // Click handler render cycle
    await Promise.resolve();
    // Render cycle triggered by tracked value {result}
    await Promise.resolve();
​
    // Verify result is set in the template
    expect(resultEle.textContent).toBe('test value');
    // Open triggered once
    expect(LightningPrompt.open.mock.calls).toHaveLength(1);
})
```


:::::

:::::tab
::component-specification{component="prompt" model="lwc" namespace="lightning"}

:::::

::::::