Modal API

API reference docs for theModalcomponent. For examples and details on the usage of this component, visit the component demo page.

Props​

Props

Type

Description

Default

open

boolean

When set to true, the dialog will be mounted to DOM.

_

onClose?

function

Callback triggered on closing the dialog and will activate upon pressing "Esc" or clicking on the overlay.

_

onEscPress?

(event: KeyboardEvent) => void

Callback fired when "Esc" key is pressed along with onClose.

_

onOverlayClick?

function

Callback fired when the overlay is clicked along with onClose

_

titleId

string

Id of Modal Title element, will be announced as aria-labelledby

_

descriptionId?

string

Id of Modal description element, will be announced as aria-describedby

_

closeOnEsc?

boolean

If false, the dialog will not close when the Esc key is pressed. When set to false Esc keydown event and onClose callback will not be attached. Likewise onEscPress will have no effect.

true

closeOnOverlayClick?

boolean

If false, the dialog will not close when the overlay is clicked. When set to false and onClose callback will not be attached. Likewise onOverlayClick will have no effect

true

role?

'dialog' | 'alertdialog'

The role attribute of the dialog

dialog

size?

number

The size of the Modal 'Dialog' box in pixels.

640

mobileFriendly?

boolean

Indicates if the opened element should be rendered as a Sheet in mobile viewports.

true

togglePoint?

number

The screen width at which the modal should switch to a mobile-friendly layout. Deprecated with backwards compatibility ⚠️ (The logic will be handled internally in future)

768

shouldContainFocus?

boolean

If users need to interact with other parts of the page such as a chatbot window , disable focus containment within the modal by setting this prop to false. Note: This is not recommended by default, as it may impact WCAG accessibility compliance.

true