A modal dialog is a message box or child window that requires user interaction before returning to the parent window. These boxes appear on top of the open parent window that is currently displayed on the screen.
Name | Default | Description |
---|---|---|
isCloseVisible: boolean | true | If true, the close 'x' button will be visible. |
onCloseClick: function | This function will be called when the user clicks the close 'x' button. The responsibility of hiding the dialog lies with the user. | |
onBackgroundClick: function | This function will be called when the user clicks background. The responsibility of hiding the dialog lies with the user. | |
overlay: boolean | true | If true, the dialog will be displayed over a darker background that covers the content behind. |
padding: string | object | 'small' | Size of the padding to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes. |
tabIndex: number | 0 | Value of the tabindex given to the close 'x' button. |
children: node | The area inside the dialog. This area can be used to render custom content. |