DialogApi.show()

Home > @backstage/frontend-plugin-api > DialogApi > show

Opens a modal dialog and returns a handle to it.

Signature:

show<TResult = {}>(elementOrComponent: JSX.Element | ((props: {
        dialog: DialogApiDialog<TResult | undefined>;
    }) => JSX.Element)): DialogApiDialog<TResult | undefined>;

Parameters

Parameter	Type	Description
elementOrComponent	JSX.Element | ((props: { dialog: DialogApiDialog<TResult | undefined>; }) => JSX.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>

Remarks

This dialog can be closed by calling the close method on the returned handle, optionally providing a result. The dialog can also be closed by the user by clicking the backdrop or pressing the escape key.

If the dialog is closed without a result, the result will be undefined.

Example 1

### Example with inline dialog content

const dialog = dialogApi.show<boolean>(
  <DialogContent>
    <DialogTitle>Are you sure?</DialogTitle>
    <DialogActions>
      <Button onClick={() => dialog.close(true)}>Yes</Button>
      <Button onClick={() => dialog.close(false)}>No</Button>
    </DialogActions>
  </DialogContent>
);
const result = await dialog.result();

Example 2

### Example with separate dialog component

function CustomDialog({ dialog }: { dialog: DialogApiDialog<boolean | undefined> }) {
  return (
    <DialogContent>
      <DialogTitle>Are you sure?</DialogTitle>
      <DialogActions>
        <Button onClick={() => dialog.close(true)}>Yes</Button>
        <Button onClick={() => dialog.close(false)}>No</Button>
      </DialogActions>
    </DialogContent>
  )
}
const result = await dialogApi.show(CustomDialog).result();