Modal

Description

Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.

Type

boolean

Default

false.

Description

The animation of the tooltip.

Type

Default

'scale'

Description

The HTML element to render.

Type

keyof IntrinsicElements

Description

If true, scrolling will be disabled on the body when the modal opens.

Type

boolean

Default

true

Description

If true, the modal will close when the Esc key is pressed.

Type

boolean

Default

true

Description

If true, the modal will close when the overlay is clicked.

Type

boolean

Default

true

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"

Description

Props for modal container element.

Type

HTMLUIProps

Description

The animation duration.

Type

number | MotionLifecycleProps<number>

Description

ref of the element to return focus to when FocusLock unmounts.

Type

RefObject<FocusableElement>

Description

ref of the element to receive focus initially.

Type

RefObject<FocusableElement>

Description

If true, the open will be opened.

Deprecated

Use open instead.

Type

boolean

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

boolean

Default

false

Description

Callback invoked to close the modal.

Type

() => void

Description

Callback function to run side effects after the modal has closed.

Type

() => void

Description

Callback fired when the escape key is pressed and focus is within modal.

Type

() => void

Description

Callback fired when the overlay is clicked.

Type

() => void

Description

If true, the open will be opened.

Type

boolean

Description

The CSS padding property.

Type

UIValue<number | "px" | "initial" | "inherit" | "-moz-initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "2xl" | "lg" | "md" | "sm" | "xl" | ({} & string) | "-0.5" | "-1" | ... 99 more ... | "xs">

Description

The placement of the modal.

Type

UIValue<| "bottom"
| "left"
| "right"
| "top"
| "center"
| "bottom-left"
| "bottom-right"
| "top-left"
| "top-right">

Default

'center'

Description

Props to be forwarded to the portal component.

Type

Omit<PortalProps, "children">

Description

If true, focus will be restored to the element that triggered the FocusLock once it unmounts.

Type

boolean

Default

false

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'

Description

The size of the Modal.

Type

"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "full"

Default

"md"

Description

The variant of the Modal.

Type

string

Description

If true, display the modal close button.

Type

boolean

Default

true

Description

If true, display the modal overlay.

Type

boolean

Default

true

Description

The HTML element to render.

Type

keyof IntrinsicElements

Description

If true, disable ripple effects when pressing a element.

Type

boolean

Default

false

Description

If true, the button is full rounded.

Type

boolean

Default

false

Description

If true, the button is disabled.

Deprecated

Use disabled instead.

Type

boolean

Default

false

Description

If true, the button is full rounded.

Deprecated

Use fullRounded instead.

Type

boolean

Default

false

Props

ModalProps

ModalHeaderProps

ModalBodyProps

ModalFooterProps

ModalOverlayProps

as

ModalCloseButtonProps

disableRipple

fullRounded

isDisabled

isRounded