This Dialog is built with the Radix primitive: https://www.radix-ui.com/primitives/docs/components/dialog Example: ```jsx State.init({ dialogIsOpen: false, }); function handleCancelFunction() { console.log("cancel"); } function handleConfirmFunction() { console.log("confirm"); } return ( <> <Widget src="near/widget/DIG.Button" props={{ label: "Open Dialog", onClick: () => State.update({ dialogIsOpen: true }), }} /> <Widget src="near/widget/DIG.Dialog" props={{ type: "alert", title: "Header", description: "Some description", onCancel: handleCancelFunction, onConfirm: handleConfirmFunction, cancelButtonText: "Cancel", confirmButtonText: "Confirm", open: state.dialogIsOpen, onOpenChange: (value) => State.update({ dialogIsOpen: value }), }} /> </> ); ``` ### Props `type` - type: `string` (variants: `"alert"` or `"dialog"`) - `"alert"` - https://www.radix-ui.com/primitives/docs/components/alert-dialog - `"dialog"` - https://www.radix-ui.com/primitives/docs/components/dialog - Defines type of Dialog. `title` - type: `string` - Title of Dialog. `description` - type: `string` - Description of Dialog. `content` - type: `string` or `JSX` - Add additional information to your Dialog or even specify your own `title`, `description`... `actionButtons` - type: `JSX` - A custom action buttons section for more control on Dialog. - _note:_ `onCancel`, `onConfirm`, `cancelButtonText`, `confirmButtonText`, `cancelButton`, `confirmButton` - all this properties will be ignored. Don't forget to pass event handlers to new buttons. `onCancel` - type: `function` - Event handler called when the user clicks on cancel button. `onConfirm` - type: `function` - Event handler called when the user clicks on confirm button. `cancelButtonText` - type: `string` - Label on cancel button. `confirmButtonText` - type: `string` - Label on confirm button. `cancelButton` - type: `JSX` - A custom button that closes the dialog. - Overrides `cancelButtonText`. - _note:_ pass `onCancel` event handler to specify custom action on cancel. `confirmButton` - type: `JSX` - A custom button that closes the dialog. - Overrides `confirmButtonText`. - _note:_ pass `onConfirm` event handler to specify custom action on cancel. `trigger` - type: `JSX` - An optional trigger element that will open the dialog. `contentStyles` - type: `object` - styling options for Dialog.Content. `actionStyles` - type: `object` - styling options for Dialog action buttons. `overlayColor` -type: `string` - Specify a color for layer that covers the inert portion of the view when the dialog is open. `overlayBlur` - type: `string` - Similar to `overlayColor`. Specifies blur. `enableCloseButton` - type: `boolean` - Enable or disable a close Dialog button (`X`). - _note:_ `false` by default. If `type = "dialog"` - `true`. This component also accepts all `Alert.Dialog` or `Dialog` (depends on selected `type`) props as outlined in the Radix documentation.