Modal

Overlay some UI on top of the application. Dim the rest of the app while opened.

<Modal opened={opened} onClose={close}>
{/* Modal content */}
</Modal>

Modal works with a boolean state variable to control the display (plugged on the opened prop).

Modal also works with an onClose handler, called on dismissal attempts, and responsible for toggling back the state to closed, or for denying the dismissal.

reminder: Mantine's useDisclosure provides a boolean state variable, and open and close state-mutation functions, which are fitting for a modal:

const [opened, { open, close }] = useDisclosure(false);

The following actions qualify as attempts to dismiss:

• press the escape key
• click outside
• click the close button (if displayed)

We usually open the modal with a button:

<Button onClick={open}>
        Open modal
</Button>

The inner content is commonly form elements: some inputs and a submit button.

defaults

• the modal has a top section with a close button
• radius adheres to theme.defaultRadius which defaults to 4px.

overrides

• remove the close button with withCloseButton, which can remove the header altogether.
• center the modal with centered.
• add a title, which can be any React node (not text-only).
• control the dimming with overlayProps. The dimming is done by an underlying <Overlay>.
• more overrides