Back to Modal
View full API on Modal
Modal
Scrollable content
Long body with Accept/Decline footer actions.
API
| Prop | Type | Default | Description |
|---|---|---|---|
| show | boolean | — | Controlled visibility. |
| onClose | () => void | — | Called when the user dismisses the dialog. |
| children | ReactNode | — | Dialog body content. |
| title / description | ReactNode | — | Panel header text. |
| modalWidth | "sm" | "md" | "lg" | "xl" | "auto" | "full" | md | Max width (and height for `full`). |
| closeable | boolean | true | Whether Escape and overlay click dismiss the modal. |
| showCloseIcon | boolean | true | Shows the header close icon when `onClose` is provided. |
| scrollable | boolean | false | Scrolls long body content inside the panel. |
| zIndex | number | 50 | Stacking order for the overlay and panel. |
| hideHeader | boolean | false | Hides the panel header entirely. |
| bodyNoPadding | boolean | false | Removes default padding from the body region. |
| bodyClassName | string | — | Merged onto the scrollable body container. |
| overlayClassName | string | — | Merged onto the backdrop overlay. |
| className | string | — | Merged onto the panel container. |
| unmountOnHide | boolean | true | Remove from the DOM after the exit animation. |
| initialFocusRef | RefObject<HTMLElement> | — | Element to focus when the dialog opens. |
| onOpening / onOpened / onClosing / onClosed | () => void | — | Animation lifecycle callbacks. |
| footer | ReactNode | — | Footer action row via Panel. |
| leftIcon / rightIcons / leftDetails / rightDetails | Panel slots | — | Rich header configuration (see Panel). |
| leftContent / rightContent | ReactNode | — | Custom header regions flanking the title block. |