@lowdefy/docs-content 0.0.0-experimental-20260710073520

package/content/container-blocks/modal.md

@@ -0,0 +1,1180 @@
+# Modal
+
+Modal dialog overlay for focused content. Add `shortcut: Escape` to the `onClose` event to run custom actions when Escape is pressed. Ant Design's Modal already closes on Escape by default — the shortcut triggers your custom actions in addition to the built-in close.
+
+This is a basic modal dialog with a title, content area, and default Ok/Cancel buttons.
+
+Click Ok to confirm or Cancel to dismiss.
+
+```yaml
+- id: modal_basic_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Modal
+    color: primary
+    variant: solid
+  events:
+    onClick:
+      - id: modal_basic_open
+        type: CallMethod
+        params:
+          blockId: modal_basic
+          method: setOpen
+          args:
+            - open: true
+- id: modal_basic
+  type: Modal
+  properties:
+    title: Basic Modal
+  blocks:
+    - id: modal_basic_p1
+      type: Paragraph
+      properties:
+        content: This is a basic modal dialog with a title, content area, and default
+          Ok/Cancel buttons.
+    - id: modal_basic_p2
+      type: Paragraph
+      properties:
+        content: Click Ok to confirm or Cancel to dismiss.
+```
+
+The modal title supports HTML markup for rich text formatting.
+
+```yaml
+- id: modal_html_title_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Modal with HTML Title
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: modal_html_title_open
+        type: CallMethod
+        params:
+          blockId: modal_html_title
+          method: setOpen
+          args:
+            - open: true
+- id: modal_html_title
+  type: Modal
+  properties:
+    title: <b>Bold</b> and <em>italic</em> title
+  blocks:
+    - id: modal_html_title_content
+      type: Paragraph
+      properties:
+        content: The modal title supports HTML markup for rich text formatting.
+```
+
+The okText and cancelText properties customize the footer button labels. This modal uses "Save Changes" and "Discard" instead of "Ok" and "Cancel".
+
+```yaml
+- id: modal_btn_text_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Modal
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: modal_btn_text_open
+        type: CallMethod
+        params:
+          blockId: modal_btn_text
+          method: setOpen
+          args:
+            - open: true
+- id: modal_btn_text
+  type: Modal
+  properties:
+    title: Custom Button Text
+    okText: Save Changes
+    cancelText: Discard
+  blocks:
+    - id: modal_btn_text_content
+      type: Paragraph
+      properties:
+        content: The okText and cancelText properties customize the footer button
+          labels. This modal uses "Save Changes" and "Discard" instead of "Ok"
+          and "Cancel".
+```
+
+Custom button props allow fine-grained control over the footer buttons. Here the Ok button is styled as a danger button, and the Cancel button uses primary styling.
+
+```yaml
+- id: modal_btn_props_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Modal with Custom Buttons
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: modal_btn_props_open
+        type: CallMethod
+        params:
+          blockId: modal_btn_props
+          method: setOpen
+          args:
+            - open: true
+- id: modal_btn_props
+  type: Modal
+  properties:
+    title: Danger Confirmation
+    okText: Delete
+    cancelText: Keep
+    okButtonProps:
+      danger: true
+    cancelButtonProps:
+      type: primary
+  blocks:
+    - id: modal_btn_props_content
+      type: Paragraph
+      properties:
+        content: Custom button props allow fine-grained control over the footer buttons.
+          Here the Ok button is styled as a danger button, and the Cancel button
+          uses primary styling.
+```
+
+This modal is vertically centered in the viewport. By default, modals appear near the top of the page.
+
+```yaml
+- id: modal_centered_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Centered Modal
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: modal_centered_open
+        type: CallMethod
+        params:
+          blockId: modal_centered
+          method: setOpen
+          args:
+            - open: true
+- id: modal_centered
+  type: Modal
+  properties:
+    title: Centered Modal
+    centered: true
+  blocks:
+    - id: modal_centered_content
+      type: Paragraph
+      properties:
+        content: This modal is vertically centered in the viewport. By default, modals
+          appear near the top of the page.
+```
+
+A compact 300px modal, suitable for simple confirmations.
+
+An 800px wide modal with more room for complex content like forms, tables, or detail views.
+
+Using a percentage width makes the modal responsive, taking up 80% of the viewport width.
+
+```yaml
+- id: modal_narrow_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Narrow (300px)
+    color: primary
+    variant: outlined
+    size: small
+  events:
+    onClick:
+      - id: modal_narrow_open
+        type: CallMethod
+        params:
+          blockId: modal_narrow
+          method: setOpen
+          args:
+            - open: true
+- id: modal_wide_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Wide (800px)
+    color: primary
+    variant: outlined
+    size: small
+  events:
+    onClick:
+      - id: modal_wide_open
+        type: CallMethod
+        params:
+          blockId: modal_wide
+          method: setOpen
+          args:
+            - open: true
+- id: modal_pct_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Percentage (80%)
+    color: primary
+    variant: outlined
+    size: small
+  events:
+    onClick:
+      - id: modal_pct_open
+        type: CallMethod
+        params:
+          blockId: modal_pct
+          method: setOpen
+          args:
+            - open: true
+- id: modal_narrow
+  type: Modal
+  properties:
+    title: Narrow Modal
+    width: 300
+  blocks:
+    - id: modal_narrow_content
+      type: Paragraph
+      properties:
+        content: A compact 300px modal, suitable for simple confirmations.
+- id: modal_wide
+  type: Modal
+  properties:
+    title: Wide Modal
+    width: 800
+  blocks:
+    - id: modal_wide_content
+      type: Paragraph
+      properties:
+        content: An 800px wide modal with more room for complex content like forms,
+          tables, or detail views.
+- id: modal_pct
+  type: Modal
+  properties:
+    title: 80% Width Modal
+    width: 80%
+  blocks:
+    - id: modal_pct_content
+      type: Paragraph
+      properties:
+        content: Using a percentage width makes the modal responsive, taking up 80% of
+          the viewport width.
+```
+
+The close button is visible in the top right corner. This is the default behavior.
+
+The close (x) button is hidden. Users must use the Ok or Cancel buttons to close this modal.
+
+```yaml
+- id: modal_closable_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Closable (default)
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: modal_closable_open
+        type: CallMethod
+        params:
+          blockId: modal_closable
+          method: setOpen
+          args:
+            - open: true
+- id: modal_not_closable_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: No Close Button
+    color: danger
+    variant: outlined
+  events:
+    onClick:
+      - id: modal_not_closable_open
+        type: CallMethod
+        params:
+          blockId: modal_not_closable
+          method: setOpen
+          args:
+            - open: true
+- id: modal_closable
+  type: Modal
+  properties:
+    title: Closable Modal
+    closable: true
+  blocks:
+    - id: modal_closable_content
+      type: Paragraph
+      properties:
+        content: The close button is visible in the top right corner. This is the
+          default behavior.
+- id: modal_not_closable
+  type: Modal
+  properties:
+    title: No Close Button
+    closable: false
+  blocks:
+    - id: modal_not_closable_content
+      type: Paragraph
+      properties:
+        content: The close (x) button is hidden. Users must use the Ok or Cancel buttons
+          to close this modal.
+```
+
+The mask is visible but clicking it does not close the modal. Users must use the buttons or close icon.
+
+No mask overlay is shown behind the modal. The page content remains fully visible.
+
+```yaml
+- id: modal_mask_not_closable_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Mask Not Closable
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: modal_mask_not_closable_open
+        type: CallMethod
+        params:
+          blockId: modal_mask_not_closable
+          method: setOpen
+          args:
+            - open: true
+- id: modal_no_mask_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: No Mask
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: modal_no_mask_open
+        type: CallMethod
+        params:
+          blockId: modal_no_mask
+          method: setOpen
+          args:
+            - open: true
+- id: modal_mask_not_closable
+  type: Modal
+  properties:
+    title: Mask Not Closable
+    maskClosable: false
+  blocks:
+    - id: modal_mask_not_closable_content
+      type: Paragraph
+      properties:
+        content: The mask is visible but clicking it does not close the modal. Users
+          must use the buttons or close icon.
+- id: modal_no_mask
+  type: Modal
+  properties:
+    title: No Mask
+    mask: false
+  blocks:
+    - id: modal_no_mask_content
+      type: Paragraph
+      properties:
+        content: No mask overlay is shown behind the modal. The page content remains
+          fully visible.
+```
+
+Setting footer to false removes the Ok and Cancel buttons entirely. This is useful for informational dialogs or when you provide your own action buttons in the content area.
+
+```yaml
+- id: modal_no_footer_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Modal (no footer)
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: modal_no_footer_open
+        type: CallMethod
+        params:
+          blockId: modal_no_footer
+          method: setOpen
+          args:
+            - open: true
+- id: modal_no_footer
+  type: Modal
+  properties:
+    title: No Footer Modal
+    footer: false
+  blocks:
+    - id: modal_no_footer_content
+      type: Paragraph
+      properties:
+        content: Setting footer to false removes the Ok and Cancel buttons entirely.
+          This is useful for informational dialogs or when you provide your own
+          action buttons in the content area.
+    - id: modal_no_footer_close_btn
+      type: Button
+      properties:
+        title: Close
+        color: primary
+        variant: solid
+        block: true
+      events:
+        onClick:
+          - id: modal_no_footer_close
+            type: CallMethod
+            params:
+              blockId: modal_no_footer
+              method: setOpen
+              args:
+                - open: false
+```
+
+The footer slot replaces the default Ok/Cancel buttons with custom content. This example shows a Delete button on the left and Save/Cancel on the right.
+
+```yaml
+- id: modal_footer_slot_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Modal with Custom Footer
+    color: primary
+    variant: solid
+  events:
+    onClick:
+      - id: modal_footer_slot_open
+        type: CallMethod
+        params:
+          blockId: modal_footer_slot
+          method: setOpen
+          args:
+            - open: true
+- id: modal_footer_slot
+  type: Modal
+  properties:
+    title: Custom Footer
+  slots:
+    footer:
+      blocks:
+        - id: modal_footer_slot_row
+          type: Box
+          layout:
+            gap: 8
+            justify: space-between
+          blocks:
+            - id: modal_footer_delete_btn
+              type: Button
+              layout:
+                flex: 0 0 auto
+              properties:
+                title: Delete
+                color: danger
+                variant: text
+                icon: AiOutlineDelete
+            - id: modal_footer_actions
+              type: Box
+              layout:
+                flex: 0 0 auto
+                gap: 8
+              blocks:
+                - id: modal_footer_cancel_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Cancel
+                    color: default
+                    variant: outlined
+                  events:
+                    onClick:
+                      - id: modal_footer_cancel_close
+                        type: CallMethod
+                        params:
+                          blockId: modal_footer_slot
+                          method: setOpen
+                          args:
+                            - open: false
+                - id: modal_footer_save_btn
+                  type: Button
+                  layout:
+                    flex: 0 0 auto
+                  properties:
+                    title: Save
+                    color: primary
+                    variant: solid
+                    icon: AiOutlineSave
+                  events:
+                    onClick:
+                      - id: modal_footer_save_close
+                        type: CallMethod
+                        params:
+                          blockId: modal_footer_slot
+                          method: setOpen
+                          args:
+                            - open: false
+  blocks:
+    - id: modal_footer_slot_content
+      type: Paragraph
+      properties:
+        content: The footer slot replaces the default Ok/Cancel buttons with custom
+          content. This example shows a Delete button on the left and
+          Save/Cancel on the right.
+```
+
+The wrapperStyle property applies CSS to the modal wrapper element. This can control overflow, positioning, and other layout aspects of the wrapper container.
+
+```yaml
+- id: modal_wrapper_style_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Modal with Wrapper Style
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: modal_wrapper_style_open
+        type: CallMethod
+        params:
+          blockId: modal_wrapper_style
+          method: setOpen
+          args:
+            - open: true
+- id: modal_wrapper_style
+  type: Modal
+  properties:
+    title: Wrapper Style Modal
+    wrapperStyle:
+      overflow: hidden
+  blocks:
+    - id: modal_wrapper_style_content
+      type: Paragraph
+      properties:
+        content: The wrapperStyle property applies CSS to the modal wrapper element.
+          This can control overflow, positioning, and other layout aspects of
+          the wrapper container.
+```
+
+This modal uses a custom z-index of 2000 to ensure it appears above other overlays. The default is 1000.
+
+```yaml
+- id: modal_zindex_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Modal (z-index 2000)
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: modal_zindex_open
+        type: CallMethod
+        params:
+          blockId: modal_zindex
+          method: setOpen
+          args:
+            - open: true
+- id: modal_zindex
+  type: Modal
+  properties:
+    title: High Z-Index Modal
+    zIndex: 2000
+  blocks:
+    - id: modal_zindex_content
+      type: Paragraph
+      properties:
+        content: This modal uses a custom z-index of 2000 to ensure it appears above
+          other overlays. The default is 1000.
+```
+
+This modal uses the toggleOpen method. Each click of the button alternates between open and closed states.
+
+```yaml
+- id: modal_toggle_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Toggle Modal
+    color: primary
+    variant: solid
+    icon: AiOutlineSwap
+  events:
+    onClick:
+      - id: modal_toggle_call
+        type: CallMethod
+        params:
+          blockId: modal_toggle
+          method: toggleOpen
+- id: modal_toggle
+  type: Modal
+  properties:
+    title: Toggle Modal
+  blocks:
+    - id: modal_toggle_content
+      type: Paragraph
+      properties:
+        content: This modal uses the toggleOpen method. Each click of the button
+          alternates between open and closed states.
+```
+
+This modal demonstrates all four events. onOpen fires when the modal opens, onOk when the Ok button is clicked, onCancel when Cancel is clicked, and onClose fires after either onOk or onCancel completes.
+
+```yaml
+- id: modal_events_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Modal with Events
+    color: primary
+    variant: solid
+  events:
+    onClick:
+      - id: modal_events_open
+        type: CallMethod
+        params:
+          blockId: modal_events
+          method: setOpen
+          args:
+            - open: true
+- id: modal_events
+  type: Modal
+  properties:
+    title: Modal with Events
+  events:
+    onOpen:
+      - id: modal_events_on_open
+        type: DisplayMessage
+        params:
+          content: Modal opened.
+          status: info
+    onOk:
+      - id: modal_events_on_ok
+        type: DisplayMessage
+        params:
+          content: Ok button clicked.
+          status: success
+    onCancel:
+      - id: modal_events_on_cancel
+        type: DisplayMessage
+        params:
+          content: Cancel button clicked.
+          status: warning
+    onClose:
+      - id: modal_events_on_close
+        type: DisplayMessage
+        params:
+          content: Modal closed.
+          status: info
+  blocks:
+    - id: modal_events_content
+      type: Paragraph
+      properties:
+        content: This modal demonstrates all four events. onOpen fires when the modal
+          opens, onOk when the Ok button is clicked, onCancel when Cancel is
+          clicked, and onClose fires after either onOk or onCancel completes.
+```
+
+This modal overrides design tokens via the theme property. The header has a blue background, custom title color and size, and larger border radius.
+
+A warm-toned modal using an extensive set of theme tokens including headerBg, contentBg, footerBg, titleColor, colorBgMask, headerBorderBottom, footerBorderTop, headerPadding, bodyPadding, footerPadding, and margin tokens.
+
+```yaml
+- id: modal_theme_blue_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Blue Themed Modal
+    color: primary
+    variant: solid
+  events:
+    onClick:
+      - id: modal_theme_blue_open
+        type: CallMethod
+        params:
+          blockId: modal_theme_blue
+          method: setOpen
+          args:
+            - open: true
+- id: modal_theme_blue
+  type: Modal
+  properties:
+    title: Blue Theme Modal
+    theme:
+      titleColor: "#0958d9"
+      titleFontSize: 20
+      titleLineHeight: 1.8
+      borderRadiusLG: 16
+  blocks:
+    - id: modal_theme_blue_content
+      type: Paragraph
+      properties:
+        content: This modal overrides design tokens via the theme property. The header
+          has a blue background, custom title color and size, and larger border
+          radius.
+- id: modal_theme_warm_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Warm Themed Modal
+    color: default
+    variant: solid
+  events:
+    onClick:
+      - id: modal_theme_warm_open
+        type: CallMethod
+        params:
+          blockId: modal_theme_warm
+          method: setOpen
+          args:
+            - open: true
+- id: modal_theme_warm
+  type: Modal
+  properties:
+    title: Warm Theme Modal
+    theme:
+      titleColor: "#d46b08"
+      colorBgMask: rgba(250, 173, 20, 0.1)
+      borderRadiusLG: 20
+      headerBorderBottom: 1px solid
+      footerBorderTop: 1px solid
+      headerMarginBottom: 0
+      footerMarginTop: 0
+      headerPadding: 16px 24px
+      bodyPadding: 24
+      footerPadding: 16px 24px
+  blocks:
+    - id: modal_theme_warm_content
+      type: Paragraph
+      properties:
+        content: A warm-toned modal using an extensive set of theme tokens including
+          headerBg, contentBg, footerBg, titleColor, colorBgMask,
+          headerBorderBottom, footerBorderTop, headerPadding, bodyPadding,
+          footerPadding, and margin tokens.
+```
+
+This modal uses style.body and style.mask to apply custom background colors. The body has a green tint and the mask has a subtle green overlay.
+
+The element, wrapper, header, body, footer, mask, and content CSS keys allow targeting different parts of the modal with inline styles or Tailwind classes.
+
+```yaml
+- id: modal_styled_body_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Styled Modal
+    color: primary
+    variant: solid
+  events:
+    onClick:
+      - id: modal_styled_body_open
+        type: CallMethod
+        params:
+          blockId: modal_styled_body
+          method: setOpen
+          args:
+            - open: true
+- id: modal_styled_body
+  type: Modal
+  properties:
+    title: Styled Modal
+  style:
+    .body:
+      padding: 24px
+    .mask:
+      backgroundColor: rgba(0, 100, 0, 0.15)
+  blocks:
+    - id: modal_styled_body_content
+      type: Paragraph
+      properties:
+        content: This modal uses style.body and style.mask to apply custom background
+          colors. The body has a green tint and the mask has a subtle green
+          overlay.
+- id: modal_styled_wrapper_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Modal with Wrapper Style
+    color: primary
+    variant: outlined
+  events:
+    onClick:
+      - id: modal_styled_wrapper_open
+        type: CallMethod
+        params:
+          blockId: modal_styled_wrapper
+          method: setOpen
+          args:
+            - open: true
+- id: modal_styled_wrapper
+  type: Modal
+  properties:
+    title: Custom Wrapper Style
+  style:
+    .element:
+      borderRadius: 20px
+    .wrapper:
+      backdropFilter: blur(2px)
+  blocks:
+    - id: modal_styled_wrapper_content
+      type: Paragraph
+      properties:
+        content: The element, wrapper, header, body, footer, mask, and content CSS keys
+          allow targeting different parts of the modal with inline styles or
+          Tailwind classes.
+```
+
+Modal supports these CSS keys for Tailwind class targeting: element, header, body, footer, mask, wrapper, content. Use class as an object to apply Tailwind utilities to each area independently.
+
+```yaml
+- id: modal_css_keys_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Open Modal with Tailwind Classes
+    color: primary
+    variant: solid
+  events:
+    onClick:
+      - id: modal_css_keys_open
+        type: CallMethod
+        params:
+          blockId: modal_css_keys
+          method: setOpen
+          args:
+            - open: true
+- id: modal_css_keys
+  type: Modal
+  properties:
+    title: Tailwind Styled Modal
+  class:
+    header: bg-bg-layout
+    body: bg-bg-layout p-8
+    footer: bg-bg-layout
+    content: rounded-2xl overflow-hidden
+  blocks:
+    - id: modal_css_keys_content
+      type: Paragraph
+      properties:
+        content: "Modal supports these CSS keys for Tailwind class targeting: element,
+          header, body, footer, mask, wrapper, content. Use class as an object
+          to apply Tailwind utilities to each area independently."
+```
+
+Jane Cooper
+
+Senior Product Designer
+
+```yaml
+- id: modal_profile_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Edit Profile
+    color: primary
+    variant: solid
+    icon: AiOutlineEdit
+  events:
+    onClick:
+      - id: modal_profile_open
+        type: CallMethod
+        params:
+          blockId: modal_profile
+          method: setOpen
+          args:
+            - open: true
+- id: modal_profile
+  type: Modal
+  properties:
+    title: Edit Your Profile
+    width: 640
+    okText: Save Profile
+    cancelText: Cancel
+    centered: true
+    theme:
+      headerBorderBottom: 1px solid
+      headerMarginBottom: 0
+  events:
+    onOk:
+      - id: modal_profile_save
+        type: DisplayMessage
+        params:
+          content: Profile saved successfully.
+          status: success
+  blocks:
+    - id: modal_profile_avatar_row
+      type: Box
+      layout:
+        gap: 16
+        align: center
+      blocks:
+        - id: modal_profile_avatar
+          type: Avatar
+          layout:
+            flex: 0 0 auto
+          properties:
+            icon: AiOutlineUser
+            size: 72
+            color: "#fff"
+            backgroundColor: "#1677ff"
+        - id: modal_profile_info
+          type: Box
+          layout:
+            flex: 1 1 0
+            direction: column
+            gap: 4
+          blocks:
+            - id: modal_profile_name_title
+              type: Title
+              properties:
+                content: Jane Cooper
+                level: 4
+            - id: modal_profile_role_text
+              type: Paragraph
+              properties:
+                content: Senior Product Designer
+    - id: modal_profile_divider
+      type: Divider
+    - id: modal_profile_name_input
+      type: TextInput
+      properties:
+        title: Full Name
+        placeholder: Enter your full name
+    - id: modal_profile_email_input
+      type: TextInput
+      properties:
+        title: Email Address
+        placeholder: Enter your email
+    - id: modal_profile_bio_input
+      type: TextArea
+      properties:
+        title: Bio
+        placeholder: Tell us about yourself
+        rows: 3
+```
+
+This action cannot be undone. All project data, files, and team assignments will be permanently removed.
+
+```yaml
+- id: modal_confirm_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Delete Project
+    color: danger
+    variant: solid
+    icon: AiOutlineDelete
+  events:
+    onClick:
+      - id: modal_confirm_open
+        type: CallMethod
+        params:
+          blockId: modal_confirm
+          method: setOpen
+          args:
+            - open: true
+- id: modal_confirm
+  type: Modal
+  properties:
+    title: Delete Project?
+    width: 420
+    centered: true
+    okText: Delete Permanently
+    cancelText: Keep Project
+    okButtonProps:
+      danger: true
+    closable: false
+    maskClosable: false
+    theme:
+      titleColor: "#cf1322"
+  events:
+    onOk:
+      - id: modal_confirm_delete
+        type: DisplayMessage
+        params:
+          content: Project deleted.
+          status: success
+    onCancel:
+      - id: modal_confirm_keep
+        type: DisplayMessage
+        params:
+          content: Project kept.
+          status: info
+  blocks:
+    - id: modal_confirm_warning
+      type: Paragraph
+      properties:
+        content: This action cannot be undone. All project data, files, and team
+          assignments will be permanently removed.
+    - id: modal_confirm_details
+      type: Descriptions
+      properties:
+        column: 1
+        size: small
+        items:
+          - label: Project
+            value: Project Alpha
+          - label: Owner
+            value: Jane Cooper
+          - label: Files
+            value: 248 files (1.2 GB)
+```
+
+A serene mountain landscape captured at golden hour. Photography by John Doe.
+
+```yaml
+- id: modal_image_trigger
+  type: Button
+  layout:
+    flex: 0 0 auto
+  properties:
+    title: Preview Image
+    color: primary
+    variant: outlined
+    icon: AiOutlinePicture
+  events:
+    onClick:
+      - id: modal_image_open
+        type: CallMethod
+        params:
+          blockId: modal_image
+          method: setOpen
+          args:
+            - open: true
+- id: modal_image
+  type: Modal
+  properties:
+    title: Mountain Landscape
+    width: 720
+    footer: false
+    centered: true
+    theme:
+      bodyPadding: 0
+      headerMarginBottom: 0
+  blocks:
+    - id: modal_image_html
+      type: Html
+      properties:
+        html: <img src="https://picsum.photos/seed/mountain/700/400" alt="Mountain
+          landscape" style="width:100%; display:block;" />
+    - id: modal_image_caption
+      type: Box
+      layout:
+        gap: 8
+        align: center
+        justify: space-between
+      class: p-4
+      blocks:
+        - id: modal_image_desc
+          type: Paragraph
+          layout:
+            flex: 1 1 0
+          properties:
+            content: A serene mountain landscape captured at golden hour. Photography by
+              John Doe.
+        - id: modal_image_tags
+          type: Box
+          layout:
+            flex: 0 0 auto
+            gap: 8
+          blocks:
+            - id: modal_image_tag1
+              type: Tag
+              properties:
+                title: Photography
+                color: blue
+            - id: modal_image_tag2
+              type: Tag
+              properties:
+                title: Featured
+                color: gold
+```
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `centered` | boolean | `false` | Center the modal vertically. |
+| `closable` | boolean | `true` | Whether a close (x) button is visible on top right of the modal dialog or not. |
+| `title` | string | - | The modal dialog's title - supports html. |
+| `footer` | boolean | `true` | Show footer area. |
+| `mask` | boolean | `true` | Whether show mask or not. |
+| `maskClosable` | boolean | `true` | Whether to close the modal dialog when the mask (area outside the modal) is clicked. |
+| `okText` | string | - | Text of the Ok button. When unset, antd uses the localized default from ConfigProvider locale. |
+| `okButtonProps` | object | - | Set additional properties for the ok button. |
+| `cancelText` | string | - | Text of the Cancel button. When unset, antd uses the localized default from ConfigProvider locale. |
+| `cancelButtonProps` | object | - | Set additional properties for the cancel button. |
+| `width` | string \| number | `"520px"` | Width of the modal dialog. |
+| `zIndex` | integer | `1000` | The z-index of the modal. Useful when displaying two modals simultaneously. |
+| `theme` | object | - | Antd design token overrides for this block. See [antd design tokens](https://ant.design/components/overview#design-token). See [Ant Design modal tokens](https://ant.design/components/modal#design-token). |
+| `theme.headerBg` | string | - | Background color of the modal header. |
+| `theme.titleLineHeight` | number | `1.5` | Line height of the modal title. |
+| `theme.titleFontSize` | number | `16` | Font size of the modal title. |
+| `theme.titleColor` | string | - | Color of the modal title text. |
+| `theme.contentBg` | string | - | Background color of the modal content. |
+| `theme.footerBg` | string | `"transparent"` | Background color of the modal footer. |
+| `theme.contentPadding` | number \| string | - | Padding of the content area. |
+| `theme.headerPadding` | number \| string | - | Padding of the header area. |
+| `theme.headerBorderBottom` | string | - | Border bottom of the header. |
+| `theme.headerMarginBottom` | number | `8` | Margin bottom of the header. |
+| `theme.bodyPadding` | number | - | Padding of the body area. |
+| `theme.footerPadding` | number \| string | - | Padding of the footer area. |
+| `theme.footerBorderTop` | string | - | Border top of the footer. |
+| `theme.footerBorderRadius` | number \| string | - | Border radius of the footer. |
+| `theme.footerMarginTop` | number \| string | `8` | Margin top of the footer. |
+| `theme.confirmBodyPadding` | number \| string | - | Padding of the confirm modal body. |
+| `theme.confirmIconMarginInlineEnd` | number \| string | - | Inline end margin of the confirm modal icon. |
+| `theme.confirmBtnsMarginTop` | number \| string | - | Margin top of the confirm modal buttons. |
+| `theme.borderRadiusLG` | number | `8` | Border radius of the modal. |
+| `theme.colorBgMask` | string | `"rgba(0, 0, 0, 0.45)"` | Background color of the modal mask. |
+
+| Event | Event Data | Description |
+| --- | --- | --- |
+| `onOk` | \- | Trigger actions when Ok button is clicked. |
+| `onOpen` | \- | Trigger actions when modal is opened. |
+| `onCancel` | \- | Trigger actions when Cancel button is clicked. |
+| `onClose` | \- | Trigger actions after onOk or onCancel is completed. |
+
+| Key | Target |
+| --- | --- |
+| `/block` | Outer block wrapper (always available). |
+| `/element` | The Modal element. |
+| `/header` | The Modal header. |
+| `/body` | The Modal body. |
+| `/footer` | The Modal footer. |
+| `/mask` | The Modal mask. |
+| `/wrapper` | The Modal wrapper. |
+| `/content` | The Modal content. |
+
+| Slot | Description |
+| --- | --- |
+| `content` | Main Modal body. |
+| `footer` | Custom footer. Overrides default Ok/Cancel buttons. |