ModalDialog

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

Screenshot of modal dialog

Import statement

1
2
import ForgeUI, { ModalDialog } from '@forge/ui';

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 text="Show modal" onClick={() => setOpen(true)} />
      {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
        text={`Your size is ${size}. Click to change.`}
        onClick={() => setOpen(true)}
      />
      {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>
  );
};