Backstage
    Preparing search index...

    Interface DialogApi

    A Utility API for showing dialogs that render in the React tree and return a result.

    interface DialogApi {
        open<TResult = void>(
            elementOrComponent:
                | Element
                | ((props: { dialog: DialogApiDialog<TResult> }) => Element),
        ): DialogApiDialog<TResult>;
        show<TResult = void>(
            elementOrComponent:
                | Element
                | ((props: { dialog: DialogApiDialog<TResult | undefined> }) => Element),
        ): DialogApiDialog<TResult | undefined>;
        showModal<TResult = void>(
            elementOrComponent:
                | Element
                | ((props: { dialog: DialogApiDialog<TResult> }) => Element),
        ): DialogApiDialog<TResult>;
    }
    Index

    Methods

    open show showModal

    Methods

    • Opens a dialog and returns a handle to it.

      Type Parameters

      • TResult = void

      Parameters

      • elementOrComponent: Element | ((props: { dialog: DialogApiDialog<TResult> }) => Element)

        The element or component to render. If a component is provided, it will be provided with a dialog prop that contains the dialog handle.

      Returns DialogApiDialog<TResult>

      The provided element or component is rendered as-is in the app's React tree. It is the caller's responsibility to provide all dialog chrome, such as an overlay, backdrop, and dialog surface. This makes the method agnostic to the design library used for the dialog.

      const dialog = dialogApi.open<boolean>(
        <Dialog isOpen onOpenChange={isOpen => !isOpen && dialog.close()}>
          <DialogHeader>Are you sure?</DialogHeader>
          <DialogBody>This action cannot be undone.</DialogBody>
          <DialogFooter>
            <Button onPress={() => dialog.close(false)}>Cancel</Button>
            <Button onPress={() => dialog.close(true)}>Confirm</Button>
          </DialogFooter>
        </Dialog>
      );
      const result = await dialog.result();

      function ConfirmDialog({ dialog }: { dialog: DialogApiDialog<boolean> }) {
        return (
          <Dialog isOpen onOpenChange={isOpen => !isOpen && dialog.close()}>
            <DialogHeader>Are you sure?</DialogHeader>
            <DialogBody>This action cannot be undone.</DialogBody>
            <DialogFooter>
              <Button onPress={() => dialog.close(false)}>Cancel</Button>
              <Button onPress={() => dialog.close(true)}>Confirm</Button>
            </DialogFooter>
          </Dialog>
        );
      }
      const result = await dialogApi.open(ConfirmDialog).result();

    • Opens a dialog with built-in dialog chrome and returns a handle to it.

      Type Parameters

      • TResult = void

      Parameters

      • elementOrComponent: Element | ((props: { dialog: DialogApiDialog<TResult | undefined> }) => Element)

        The element or component to render in the dialog. If a component is provided, it will be provided with a dialog prop that contains the dialog handle.

      Returns DialogApiDialog<TResult | undefined>

      Use DialogApi.open instead. The open method does not render any dialog chrome, giving the caller full control over the dialog presentation. This avoids focus trap conflicts across design libraries.

    Settings

    Member Visibility

    On This Page

    Methods