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 |