Modal

Components

4.11.2

Design A11yWCAG-AA API Example Changelog

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

type

ModalProps

PortalProps & BoxProps & FadeInOutProps & {...}

Property	Description
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`

Modal.Overlay

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

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

Modal.Window

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

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

Modal.Close

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 />;

Modal.Title

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 />;