Dialog
The
Dialog component displays information in front of the view and deactivates the rest of the
view. It is used to focus the user to collect input or relay an important message.Confirmation dialog
Often dialogs are used for confirming dangerous user actions. To support this simple case, you add a
confirm prop to any Button or Table row action to show a confirmation dialog before the
button's action (onClick or task) is executed.If the user clicks the
Cancel button, the action will not be executed.The dialog title, body, and buttons can be customized.
You can also manually create a confirmation dialog for more complex usecases. Simply include the
ConfirmationDialog component anywhere in your view and open and close it using
Component state.Dialog
For usecases other than confirmation, use the
Dialog component. You have full control over the
content of the dialog.Component API
Dialog API
| Name | Description | Default |
|---|---|---|
| id | string The ID referenced by the global component state. | |
| defaultOpened | boolean Whether the dialog is open initially. | |
| opened | boolean Whether the dialog is open. | |
| onClose | () => void Called when the dialog is closed. | |
| size | string | number Dialog body width. | md |
| children | Component Dialog content. | |
| radius | "xs" | "sm" | "md" | "lg" | "xl" Dialog radius. | lg |
| title | Component Dialog title, displayed in header before close button. | |
| padding | number | "xs" | "sm" | "md" | "lg" | "xl" Dialog padding. | lg |
| withCloseButton | boolean Whether the dialog has a close button on the top right. | true |
| fullScreen | boolean Whether the dialog should take up the entire screen. | true |
Confirmation API
| Name | Description | Default |
|---|---|---|
| opened | boolean Whether the dialog is open. | |
| onClose | () => void Called when the dialog is closed. | |
| size | string | number Dialog body width. | md |
| children | Component Dialog content. | |
| radius | "xs" | "sm" | "md" | "lg" | "xl" Dialog radius. | lg |
| title | Component Dialog title, displayed in header before close button. | |
| padding | number | "xs" | "sm" | "md" | "lg" | "xl" Dialog padding. | lg |
| withCloseButton | boolean Whether the dialog has a close button on the top right. | true |
| fullScreen | boolean Whether the dialog should take up the entire screen. | true |
| onConfirm | () => void Callback when the dialog is confirmed. | |
| cancelText | string Text on the cancel button.
An empty string indicates that a cancel button should not be rendered. | Cancel |
| confirmText | string Text on the Confirm button. | Confirm |
| id | string The ID referenced by the global component state. | |
| defaultOpened | boolean Whether the dialog is open initially. |
State API
| Name | Description |
|---|---|
| opened | boolean Whether the dialog is opened |
| open | () => void Open the dialog |
| close | () => void Close the dialog |