Last updated Nov 23, 2022

This section describes a Forge preview feature. Preview features are deemed stable; however, they remain under active development and may be subject to shorter deprecation windows. Preview features are suitable for early adopters in production environments.

We release preview features so partners and developers can study, test, and integrate them prior to General Availability (GA). For more information, see Forge release phases: EAP, Preview, and GA.

ModalDialog

To add the ModalDialog component to your app:

1
2
import { ModalDialog } from "@forge/react";

Description

A dialog that appears in a layer above the app’s UI and requires user interaction.

Props

Name	Type	Required	Description
`children`	`Array<ForgeComponent>`	Yes	The content of the modal dialog.
`header`	`string`	Yes	The title of the modal dialog.
`onClose`	`() => void \| Promise<void>`	Yes	The function that is called when the modal is closed.
`appearance`	`"danger" \| "warning"`		Shows an icon next to the header and changes the appearance of the action button. If appearance is not specified, the default appearance is a primary button with no header icon.
`closeButtonText`	`string`		The label text displayed on the modal's close button. Defaults to `Cancel`.
`width`	`"small" \| "medium" \| "large" \| "x-large"`		The width of the modal dialog. This can range from a small popup to almost full-screen width. Defaults to `"medium"`.

Example

The example app below shows a ModalDialog when a Button is clicked.

1
2
const App = () => {
  const [isOpen, setOpen] = useState(false);
  return (
    <Fragment>
      <Button onClick={() => setOpen(true)}>Show modal</Button>
      {isOpen && (
        <ModalDialog header="My modal dialog" onClose={() => setOpen(false)}>
          <Text>Hello there!</Text>
        </ModalDialog>
      )}
    </Fragment>
  );
};

The example app below demonstrates how to use the Form and ModalDialog components to prompt the user for information.

1
2
const App = () => {
  const [isOpen, setOpen] = useState(false);
  const [size, setSize] = useState("medium");
  return (
    <Fragment>
      <Button onClick={() => setOpen(true)}>Show modal</Button>
      {isOpen && (
        <ModalDialog header="My modal dialog" onClose={() => setOpen(false)}>
          <Form
            onSubmit={(data) => {
              setSize(data.size);
              setOpen(false);
            }}
          >
            <Select label="T-shirt size" name="size">
              <Option label="Small" value="small" />
              <Option label="Medium" value="medium" />
              <Option label="Large" value="large" />
            </Select>
          </Form>
        </ModalDialog>
      )}
    </Fragment>
  );
};

Output

Example image of rendered modal dialog