#Imperative dialogs

Source | Original API

confirm / alert / prompt are three standalone functions — import and await them from any event callback: no hook, no component to mount, no React tree required. For fully custom dialogs use the Dialog component.

#Basic usage

confirm returns a Promise<boolean> (OK → true, Cancel / ESC → false); alert returns a Promise<void>; prompt returns a Promise<string | null> (Cancel / ESC → null).

import { useState } from "react";
import { Button, alert, confirm, prompt } from "ooui-react";

function App() {
  const [log, setLog] = useState("No action yet");
  const note = (s: string) => setLog(s);

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        <Button onClick={() => alert("Your changes have been saved.", { title: "Done" })}>
          alert
        </Button>
        <Button
          onClick={() =>
            confirm("Delete this record?", { title: "Confirm delete" }).then((ok) =>
              note(ok ? "Confirmed" : "Cancelled"),
            )
          }
        >
          confirm
        </Button>
        <Button
          onClick={() =>
            prompt("Enter your name:", { textInput: { defaultValue: "" } }).then((v) =>
              note(v === null ? "Cancelled" : `Hello, ${v}`),
            )
          }
        >
          prompt
        </Button>
      </div>
      <div>{log}</div>
    </div>
  );
}

export default App;

#Config inheritance

A dialog called inside an OOUIProvider subtree inherits that Provider's language, direction and popup container settings; unwrapped, it renders with defaults. For overriding message text, see OOUIProvider · Imperative dialogs.

#Runtime semantics

• The Promise resolves after the close animation finishes (plus a ~50ms margin), not at the instant of the button click — code right after await confirm(...) that reads the DOM or navigates waits for the animation first.
• The dialog renders inside the app's React tree and inherits all context of its subtree; with nested OOUIProviders, the outermost host renders all imperative dialogs (an imperative call has no position information, so rendering with the app-root config is the most predictable).
• Repeated calls stack multiple dialogs, each independently interactive; the original shares one single-window manager, where a second call while a window is open is rejected and its Promise never settles.
• In prompt, pressing Enter in the input equals clicking OK (except during IME composition; textInput.onKeyDown can veto with preventDefault); the input is focused automatically once ready (textInput.inputRef is taken internally and passing it has no effect; textInput.value is only the initial value).

#API

options (ConfirmAlertOptions / AlertOptions / PromptOptions):

#See also

• The dialog components themselves (controlled open, action areas, multi-dialog isolation): Dialog
• How imperative dialogs inherit provider config: OOUIProvider
• The multi-step dialog: ProcessDialog