Forge Developer

Beta

Forge Developer

Beta

Rate this page:

ModalDialog

A modal dialog displays content that floats above the application’s user interface. Use modal dialogs to present a short-term task initiated by the user.

Usage

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

Props

NameTypeRequiredDescription
childrenArray<ForgeComponent>YesThe content of the modal dialog.
headerstringYesThe title of the modal dialog.
onClose() => void | Promise<void>YesThe 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.
closeButtonTextstringThe 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
3
4
5
6
7
8
9
10
11
12
13
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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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>
  );
};

Preview

Screenshot of what the rendered modal dialog should look like

Rate this page: