Common UI kit components
Confluence UI kit components
Jira UI kit components
Jira Service Management UI kit components

Rate this page:

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

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
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>
  );
};

Rate this page: