Prepared Docs

Modal displays a dialog overlay that focuses user attention on specific content or actions, typically used for confirmations, forms, or important information. It provides a flexible dialog interface with header, content, and footer sections, supporting confirmations, cancellations, and various interaction patterns. Built with portal rendering and animation support, it ensures consistent modal patterns across the interface with full keyboard and screen reader accessibility.

Props

Name	Default	Description
`id`	`required`	Unique identifier for the modal. Used with `ModalProvider` to manage modal state.
`heading`	`required`	The heading text displayed at the top of the modal.
`children`	`required`	The content to display inside the modal body.
`onConfirm`	`required`	Callback function called when the confirm button is clicked: `() => void`.
`onConfirmText`	`"Confirm"`	Text to display on the confirm button.
`onCancel`		Optional callback function called when the cancel button is clicked: `() => void`.
`onCancelText`	`"Cancel"`	Text to display on the cancel button. Only shown when `onCancel` is provided.
`noDismiss`	`false`	Whether the modal can be dismissed by clicking the backdrop or dismiss button.
`shouldAllowDismiss`		Called before backdrop or header-X dismiss. Return `false` to keep the modal open.
`confirmDisabled`	`false`	Whether the confirm button should be disabled.
`closeOnConfirm`	`true`	Whether the modal should close automatically when the confirm button is clicked.
`destructive`	`false`	Whether the modal should use destructive styling for the confirm button.

Use for simple confirmations or information dialogs.

Use when only confirmation is needed, without a cancel option.

Use for actions that have significant consequences or cannot be undone.

Customize button labels to match the action context.

Prevent users from closing the modal until they complete the action.

Disable the confirm button until form validation or conditions are met.

Keep the modal open after confirmation for multi-step processes or validation feedback.

Use Scrollable component for modals with long content.

Multiple Modals

Support multiple modals that can be stacked or opened simultaneously.

ModalProvider Setup

Wrap your application with ModalProvider and include ModalPortal to enable modal functionality.

useModal Hook

Use the useModal hook to control modal visibility (open, close, isOpen).

Modal / Usage

Accessibility / Focus Management

Modal with Custom Button Text

Non-Dismissible Modal

Modal with Disabled Confirm

Modal That Stays Open on Confirm

Modal with Scrollable Content

Props

Name	Default	Description
`id`	`required`	Unique identifier for the modal. Used with `ModalProvider` to manage modal state.
`heading`	`required`	The heading text displayed at the top of the modal.
`children`	`required`	The content to display inside the modal body.
`onConfirm`	`required`	Callback function called when the confirm button is clicked: `() => void`.
`onConfirmText`	`"Confirm"`	Text to display on the confirm button.
`onCancel`		Optional callback function called when the cancel button is clicked: `() => void`.
`onCancelText`	`"Cancel"`	Text to display on the cancel button. Only shown when `onCancel` is provided.
`noDismiss`	`false`	Whether the modal can be dismissed by clicking the backdrop or dismiss button.
`shouldAllowDismiss`		Called before backdrop or header-X dismiss. Return `false` to keep the modal open.
`confirmDisabled`	`false`	Whether the confirm button should be disabled.
`closeOnConfirm`	`true`	Whether the modal should close automatically when the confirm button is clicked.
`destructive`	`false`	Whether the modal should use destructive styling for the confirm button.