Feedback
Dialog modal with focus trapping, keyboard dismissal, and safe stacking.
11 options across 4 groups
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | — | Header title. |
children | ReactNode | — | Body content. |
actions | ReactNode | — | Footer action buttons. |
title
ReactNode
Default: —
Header title.
children
ReactNode
Default: —
Body content.
actions
ReactNode
Default: —
Footer action buttons.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "full" | string | number | md | Modal width. |
blur | boolean | "sm" | "md" | "lg" | number | — | Backdrop blur amount. |
backgroundOpacity | number | — | Backdrop opacity (0-100). |
size
"xs" | "sm" | "md" | "lg" | "xl" | "full" | string | number
Default: md
Modal width.
blur
boolean | "sm" | "md" | "lg" | number
Default: —
Backdrop blur amount.
backgroundOpacity
number
Default: —
Backdrop opacity (0-100).
| Prop | Type | Default | Description |
|---|---|---|---|
portal | boolean | true | Renders through a React portal. |
container | Element | DocumentFragment | null | — | Custom portal mount target. |
zIndex | number | — | Explicit stacking z-index; auto-computed when unset. |
portal
boolean
Default: true
Renders through a React portal.
container
Element | DocumentFragment | null
Default: —
Custom portal mount target.
zIndex
number
Default: —
Explicit stacking z-index; auto-computed when unset.
| Prop | Type | Default | Description |
|---|---|---|---|
isOpen | boolean | — | Controls whether the modal is open (required). |
role | "dialog" | "alertdialog" | dialog | ARIA role. |
dismissible | boolean | true | Shows a close button in the header. |
closeLabel | string | "Close modal" | Accessible label for the close button. |
closeOnOutsideClick | boolean | true | Closes on backdrop click. |
closeOnEscape | boolean | true | Closes on Escape. |
initialFocusRef | RefObject<HTMLElement | null> | — | Element to focus when the modal opens. |
isOpen
boolean
Default: —
Controls whether the modal is open (required).
role
"dialog" | "alertdialog"
Default: dialog
ARIA role.
dismissible
boolean
Default: true
Shows a close button in the header.
closeLabel
string
Default: "Close modal"
Accessible label for the close button.
closeOnOutsideClick
boolean
Default: true
Closes on backdrop click.
closeOnEscape
boolean
Default: true
Closes on Escape.
initialFocusRef
RefObject<HTMLElement | null>
Default: —
Element to focus when the modal opens.
| Prop | Type | Default | Description |
|---|---|---|---|
animationDuration | number | — | Enter/exit animation duration in seconds. |
animationType | "fade" | "zoom" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | — | Backdrop entrance/exit animation. |
easing | "ease" | "easeIn" | "easeOut" | "easeInOut" | — | Animation easing curve. |
animationDuration
number
Default: —
Enter/exit animation duration in seconds.
animationType
"fade" | "zoom" | "slideUp" | "slideDown" | "slideLeft" | "slideRight"
Default: —
Backdrop entrance/exit animation.
easing
"ease" | "easeIn" | "easeOut" | "easeInOut"
Default: —
Animation easing curve.
| Prop | Type | Default | Description |
|---|---|---|---|
onClose | () => void | — | Called to close the modal (required). |
onClose
() => void
Default: —
Called to close the modal (required).
| Prop | Type | Default | Description |
|---|---|---|---|
backdrop | Partial<BackdropProps> | — | Extra props forwarded to the underlying Backdrop. |
headers | Partial<PageTitleProps> | — | Extra props forwarded to the header's PageTitle. |
divider | Partial<DividerProps> | — | Extra props for the header/body divider. |
classNames | Partial<Record<ModalSlot, string>> | — | Per-slot class overrides (base/header/headerTitle/body/footer/closeButton). |
className | string | — | Class applied to the root modal element. |
style | CSSProperties | — | Inline styles for the root element. |
backdrop
Partial<BackdropProps>
Default: —
Extra props forwarded to the underlying Backdrop.
headers
Partial<PageTitleProps>
Default: —
Extra props forwarded to the header's PageTitle.
divider
Partial<DividerProps>
Default: —
Extra props for the header/body divider.
classNames
Partial<Record<ModalSlot, string>>
Default: —
Per-slot class overrides (base/header/headerTitle/body/footer/closeButton).
className
string
Default: —
Class applied to the root modal element.
style
CSSProperties
Default: —
Inline styles for the root element.
