Modals

Modals allow you to display content on top of the current page. They are useful for displaying alerts, forms, or any other content that requires user interaction.

Use them sparingly though, as they can be disruptive to the flow of the user experience.

Components

Modals come in two flavours: the completely plain Modal and the TemplateModal, which provides some sensible defaults. In most cases, you’ll want to use the TemplateModal.

TemplateModal

Example usage:

const [visible, setVisible] = useState(false);
 
return (
	<>
		<TemplateModal isOpen={visible} onDismiss={() => setVisible(false)} title="Example modal">
			<p>Hello, world!</p>
		</TemplateModal>
		<Button onClick={() => setVisible(true)}>Open modal</Button>
	</>
);

Props:

• isOpen: Whether the modal is visible or not
• onDismiss: A function to call when the modal is dismissed
• title: The title of the modal
• children: The content of the modal
• className: A custom class name to apply to the modal
• showsDismissButton: Whether to show the dismiss button or not (defaults to true)
• cancel: Cancel button text - don’t use together with showsDismissButton
• confirm: Confirm button text
• confirmationAction : A function to call when the confirm button is clicked

Modal

Simple wrapper around <Dialog> from @reach/dialog.

Props:

• isOpen: Whether the modal is visible or not
• onDismiss: A function to call when the modal is dismissed

Also inherits all other props from @reach/dialog.

Modal.ExitButton

Close button for the modal. A small sub-component that can be used to close the modal.

Example usage:

<Modal.ExitButton onClick={dismissModal} />

Props:

• onClick: A function to call when the button is clicked
• className: A custom class name to apply to the button (optional)