Dialog Actions

Actions for displaying and managing dialog boxes.

show_dialog

Displays a modal dialog to the user.

Syntax

json

{
  "type": "show_dialog",
  "id": "confirmDelete",
  "title": "Confirm Delete",
  "message": "Are you sure you want to delete this item?"
}

Properties

Property	Type	Required	Description
`id`	string	Yes	Unique dialog identifier
`title`	string	Yes	Dialog title
`message`	string	-	Dialog message
`content`	ComponentSchema	-	Custom dialog content
`buttons`	array	-	Dialog buttons
`size`	string	-	Dialog size
`closable`	boolean	-	Allow close button (default: true)

Dialog Sizes

Size	Width	Use Case
`sm`	400px	Simple confirmations
`md`	500px	Standard dialogs (default)
`lg`	600px	Forms and complex content
`xl`	800px	Large forms, data tables
`full`	90vw	Full-screen content

Button Properties

json

{
  "buttons": [
    {
      "label": "Cancel",
      "variant": "ghost",
      "action": [{ "type": "close_dialog", "id": "myDialog" }]
    },
    {
      "label": "Confirm",
      "variant": "default",
      "action": [{ "type": "call_api", "api": "deleteItem" }]
    }
  ]
}

Property	Type	Required	Description
`label`	string	Yes	Button text
`variant`	string	-	Button style
`action`	array	-	Actions on click

Examples

Simple confirmation:

json

{
  "type": "show_dialog",
  "id": "confirm",
  "title": "Confirm Action",
  "message": "Are you sure you want to proceed?",
  "buttons": [
    {
      "label": "Cancel",
      "variant": "ghost",
      "action": [{ "type": "close_dialog", "id": "confirm" }]
    },
    {
      "label": "Confirm",
      "variant": "default",
      "action": [
        { "type": "call_api", "api": "performAction" },
        { "type": "close_dialog", "id": "confirm" }
      ]
    }
  ]
}

Delete confirmation:

json

{
  "type": "show_dialog",
  "id": "deleteConfirm",
  "title": "Delete Item",
  "message": "Are you sure you want to delete \"{{state.selectedItem.name}}\"? This action cannot be undone.",
  "buttons": [
    {
      "label": "Cancel",
      "variant": "ghost",
      "action": [{ "type": "close_dialog", "id": "deleteConfirm" }]
    },
    {
      "label": "Delete",
      "variant": "destructive",
      "action": [
        {
          "type": "call_api",
          "api": "deleteItem",
          "params": { "id": "{{state.selectedItem.id}}" },
          "on_success": [
            { "type": "show_toast", "message": "Item deleted", "level": "success" },
            { "type": "close_dialog", "id": "deleteConfirm" },
            { "type": "call_api", "api": "refreshList" }
          ]
        }
      ]
    }
  ]
}

With custom content:

json

{
  "type": "show_dialog",
  "id": "editItem",
  "title": "Edit Item",
  "size": "lg",
  "content": {
    "type": "Form",
    "id": "editForm",
    "children": [
      {
        "type": "Field",
        "fieldType": "text",
        "name": "name",
        "label": "Name",
        "value": "{{state.selectedItem.name}}"
      },
      {
        "type": "Field",
        "fieldType": "textarea",
        "name": "description",
        "label": "Description",
        "value": "{{state.selectedItem.description}}"
      }
    ]
  },
  "buttons": [
    {
      "label": "Cancel",
      "variant": "ghost",
      "action": [{ "type": "close_dialog", "id": "editItem" }]
    },
    {
      "label": "Save",
      "variant": "default",
      "action": [
        { "type": "validate_form", "formId": "editForm" },
        {
          "type": "call_api",
          "api": "updateItem",
          "params": { "id": "{{state.selectedItem.id}}", "data": "{{form.editForm}}" },
          "on_success": [
            { "type": "show_toast", "message": "Changes saved", "level": "success" },
            { "type": "close_dialog", "id": "editItem" }
          ]
        }
      ]
    }
  ]
}

Information dialog:

json

{
  "type": "show_dialog",
  "id": "info",
  "title": "About This Feature",
  "message": "This feature allows you to manage your team's settings and preferences.",
  "closable": true,
  "buttons": [
    {
      "label": "Got it",
      "variant": "default",
      "action": [{ "type": "close_dialog", "id": "info" }]
    }
  ]
}

close_dialog

Closes an open dialog.

Syntax

json

{
  "type": "close_dialog",
  "id": "myDialog"
}

Properties

Property	Type	Required	Description
`id`	string	Yes	Dialog identifier to close

Examples

Close specific dialog:

json

{ "type": "close_dialog", "id": "confirmDelete" }

Close after action:

json

{
  "type": "call_api",
  "api": "saveChanges",
  "on_success": [
    { "type": "show_toast", "message": "Saved!", "level": "success" },
    { "type": "close_dialog", "id": "editDialog" }
  ]
}

Common Patterns

Confirmation Pattern

json

{
  "type": "Button",
  "text": "Delete",
  "variant": "destructive",
  "events": {
    "on_click": [
      {
        "type": "show_dialog",
        "id": "confirmDelete",
        "title": "Confirm Delete",
        "message": "This action cannot be undone.",
        "buttons": [
          {
            "label": "Cancel",
            "variant": "ghost",
            "action": [{ "type": "close_dialog", "id": "confirmDelete" }]
          },
          {
            "label": "Delete",
            "variant": "destructive",
            "action": [
              { "type": "call_api", "api": "delete" },
              { "type": "close_dialog", "id": "confirmDelete" }
            ]
          }
        ]
      }
    ]
  }
}

Form Dialog Pattern

json

{
  "type": "Button",
  "text": "Add New",
  "events": {
    "on_click": [
      { "type": "update_state", "path": "formData", "value": {} },
      {
        "type": "show_dialog",
        "id": "addNew",
        "title": "Add New Item",
        "size": "lg",
        "content": {
          "type": "Form",
          "id": "addForm",
          "children": [
            { "type": "Field", "fieldType": "text", "name": "name", "label": "Name", "required": true }
          ]
        },
        "buttons": [
          { "label": "Cancel", "variant": "ghost", "action": [{ "type": "close_dialog", "id": "addNew" }] },
          {
            "label": "Create",
            "variant": "default",
            "action": [
              { "type": "validate_form", "formId": "addForm" },
              { "type": "call_api", "api": "createItem" },
              { "type": "close_dialog", "id": "addNew" }
            ]
          }
        ]
      }
    ]
  }
}

Wizard Dialog Pattern

json

{
  "type": "show_dialog",
  "id": "wizard",
  "title": "Setup Wizard - Step {{state.wizardStep}}/3",
  "size": "lg",
  "content": {
    "type": "Conditional",
    "conditions": [
      {
        "when": "{{state.wizardStep === 1}}",
        "render": { "type": "Text", "text": "Step 1 content" }
      },
      {
        "when": "{{state.wizardStep === 2}}",
        "render": { "type": "Text", "text": "Step 2 content" }
      },
      {
        "when": "{{state.wizardStep === 3}}",
        "render": { "type": "Text", "text": "Step 3 content" }
      }
    ]
  },
  "buttons": [
    {
      "label": "Back",
      "variant": "ghost",
      "visible": "{{state.wizardStep > 1}}",
      "action": [{ "type": "update_state", "path": "wizardStep", "value": "{{state.wizardStep - 1}}" }]
    },
    {
      "label": "{{state.wizardStep === 3 ? 'Finish' : 'Next'}}",
      "variant": "default",
      "action": [
        {
          "type": "conditional",
          "condition": "{{state.wizardStep < 3}}",
          "then": [{ "type": "update_state", "path": "wizardStep", "value": "{{state.wizardStep + 1}}" }],
          "else": [
            { "type": "call_api", "api": "completeSetup" },
            { "type": "close_dialog", "id": "wizard" }
          ]
        }
      ]
    }
  ]
}

Best Practices

Use unique IDs - Avoid dialog ID collisions
Always provide close option - Users should be able to dismiss dialogs
Keep dialogs focused - One task per dialog
Clear button labels - Use action verbs (“Delete”, “Save”, “Cancel”)
Match button variant to action - Use destructive for dangerous actions
Reset state on close - Clear form data when closing dialogs