DialogApi.showModal()

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

Opens a modal dialog and returns a handle to it.

Signature:

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

Parameters

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

Remarks

This dialog can not be closed in any other way than calling the close method on the returned handle and providing a result.

Example 1

### Example with inline dialog content

const dialog = dialogApi.showModal<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> }) {
  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.showModal(CustomDialog).result();