Skip to content

Modal

Components4.11.2
import Modal from '@semcore/ui/modal';
<Modal />;
typeModalProps
PortalProps & BoxProps & FadeInOutProps & {...}
PropertyDescription
duration
number = 200

Duration of animation, ms

visible
boolean

This property is responsible for the visibility of the modal window

onClose
(trigger: "onOutsideClick" | "onCloseClick" | "onEscape", e: React.MouseEvent | React.KeyboardEvent) => void

Function called when the component is hidden

closable
boolean = true

Displaying the close button(x) in the upper-right corner of the modal dialog

disablePreventScroll
boolean = false

Setting true disables mechanism that hides document body scrollbar when Modal is visible

locale
string

Component which represents the background. Has all properties as IBoxProps prop does.

import Modal from '@semcore/ui/modal';
<Modal.Overlay />;

Component which represents the modal window itself. Has all properties as IBoxProps prop does.

import Modal from '@semcore/ui/modal';
<Modal.Window />;

Component which represents the closing icon. The component is the CloseS icon with the configured styles. Has all properties as IBoxProps prop and IIconProps prop does.

import Modal from '@semcore/ui/modal';
<Modal.Close />;

Component which represents the title. It adds aria-labelledby attribute to modal window. Has all properties as ITextProps prop does.

import Modal from '@semcore/ui/modal';
<Modal.Title />;