Rate this page:
A dialog that appears in a layer above the app’s UI and requires user interaction.
1 2import ForgeUI, { ModalDialog } from '@forge/ui';
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". |
The example app below shows a ModalDialog
when a Button
is clicked.
1 2const 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 2const 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: