openAsync() opens a new instance and returns a Promise. Declare the result type as the second generic on cue.createOverlay(). Dismissal, Escape, and a bare close() resolve undefined.

Example

import { cue } from "@/components/cue";
import { Button } from "@/components/ui/button";

export const asyncConfirmDialog = cue.createOverlay<{ message: string }, boolean>((props, ctx) => {
  const components = ctx.components;

  return (
    <components.wrapper open={ctx.open} onOpenChange={ctx.onOpenChange}>
      <components.content>
        <components.header>
          <components.title>Confirm</components.title>
          <components.description>{props.message}</components.description>
        </components.header>
        <components.footer>
          <Button variant="outline" onClick={() => ctx.close({ result: false })}>
            Cancel
          </Button>
          <Button onClick={() => ctx.close({ result: true })}>Confirm</Button>
        </components.footer>
      </components.content>
    </components.wrapper>
  );
});

const confirmed = await asyncConfirmDialog.openAsync({
  message: "Archive this project?",
});
// Promise<boolean | undefined>

Any result type works:

const dialog = cue.createOverlay<{ title: string }, "one" | "two" | "three">((_props, ctx) => (
  <Button onClick={() => ctx.close({ result: "two" })}>Two</Button>
));

const choice = await dialog.openAsync({ title: "Pick" });
// Promise<"one" | "two" | "three" | undefined>

openAsync

Example

On this page