allowPinchZoom
Description
Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
Type
booleanDefault
false.Dialog
Dialog is a component used to confirm or interrupt user actions.
Props
DialogProps
animation
Description
The animation of the tooltip.
Type
"bottom" | "left" | "right" | "scale" | "top" | "none"Default
'scale'as
Description
The HTML element to render.
Type
keyof ReactDOMblockScrollOnMount
Description
If true, scrolling will be disabled on the body when the modal opens.
Type
booleanDefault
truecancel
Description
The dialog cancel to use.
Type
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| ButtonPropscloseOnEsc
Description
If true, the modal will close when the Esc key is pressed.
Type
booleanDefault
truecloseOnOverlay
Description
If true, the modal will close when the overlay is clicked.
Type
booleanDefault
truecolorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"containerProps
Description
Props for modal container element.
Type
HTMLUIPropsduration
Description
The animation duration.
Type
number | MotionLifecycleProps<number>finalFocusRef
Description
ref of the element to return focus to when FocusLock unmounts.
Type
RefObject<FocusableElement>footer
Description
The dialog footer to use.
Type
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortalheader
Description
The dialog header to use.
Type
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortalinitialFocusRef
Description
ref of the element to receive focus initially.
Type
RefObject<FocusableElement>isOpen
DeprecatedDescription
If true, the open will be opened.
Deprecated
Use open instead.
Type
booleanlockFocusAcrossFrames
Description
Enables aggressive focus capturing within iframes.
- If true: keep focus in the lock, no matter where lock is active.
- If false: allows focus to move outside of iframe.
Type
booleanDefault
falseonCancel
Description
The callback invoked when cancel button clicked.
Type
(onClose: (() => void) | undefined) => voidonClose
Description
Callback invoked to close the modal.
Type
() => voidonCloseComplete
Description
Callback function to run side effects after the modal has closed.
Type
() => voidonEsc
Description
Callback fired when the escape key is pressed and focus is within modal.
Type
() => voidonOther
Description
The callback invoked when other button clicked.
Type
(onClose: (() => void) | undefined) => voidonOverlayClick
Description
Callback fired when the overlay is clicked.
Type
() => voidonSuccess
Description
The callback invoked when success button clicked.
Type
(onClose: (() => void) | undefined) => voidopen
Description
If true, the open will be opened.
Type
booleanother
Description
The dialog other to use.
Type
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| ButtonPropsoutside
Description
The CSS padding property.
Type
UIValue<number | "px" | "initial" | "inherit" | (string & {}) | "-moz-initial" | "revert" | "revert-layer" | "unset" | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-0.5" | "-1" | ... 99 more ... | "xs">placement
Description
The placement of the modal.
Type
UIValue<| "bottom"
| "left"
| "right"
| "top"
| "center"
| "bottom-left"
| "bottom-right"
| "top-left"
| "top-right">Default
'center'portalProps
Description
Props to be forwarded to the portal component.
Type
Omit<PortalProps, "children">restoreFocus
Description
If true, focus will be restored to the element that triggered the FocusLock once it unmounts.
Type
booleanDefault
falsescrollBehavior
Description
Where scroll behavior should originate.
- inside: scroll only occurs within the ModalBody.
- outside: the entire ModalContent will scroll within the viewport.
Type
"outside" | "inside"Default
'inside'size
Description
The size of the Dialog.
Type
"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"Default
"md"success
Description
The dialog success to use.
Type
type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal
| ButtonPropsvariant
Description
The variant of the Dialog.
Type
stringwithCloseButton
Description
If true, display the modal close button.
Type
booleanDefault
truewithOverlay
Description
If true, display the modal overlay.
Type
booleanDefault
trueDialogHeaderProps
DialogBodyProps
DialogFooterProps
DialogOverlayProps
as
Description
The HTML element to render.
Type
keyof ReactDOMDialogCloseButtonProps
disableRipple
Description
If true, disable ripple effects when pressing a element.
Type
booleanDefault
falseisDisabled
DeprecatedDescription
If true, the button is disabled.
Deprecated
Use disabled instead.
Type
booleanDefault
falseisRounded
Description
If true, the button is full rounded.
Type
booleanDefault
falseEdit this page on GitHub