Button

Type identifier: button Category: Experience Blocks

Description

Interactive block that renders Text and Image children and triggers configured actions.

Schema Summary

The Button block has the fields below, plus one action shape:

1. modern action config, or
2. legacy Flow trigger config (compatibility)

Fields:

• type: "button"
• variant?: "solid" | "ghost" | "soft"
• children: Array<text | image>
• loadingChildren?: Array<text | image>
• states? (array of state entries)

Action Configuration

Modern action (action):

• kind: "flow" with flowId, triggerNodeId, inputMap, or
• kind: "preset" with preset (authAction), or
• kind: "crud" with operation, optional target, and optional onSuccess

Legacy compatibility shape:

• flowId, triggerNodeId, inputMap at block root

CRUD Actions

CRUD actions act on the targeted entity context directly, without running a Flow. In the Studio editor, choose CRUD from the Action Type select to configure:

• Operation: create, update, delete, or save. save upserts: it creates when the entity context is new and updates when loaded and dirty.
• Target Entity Context: an optional datum reference picker filtered to entity-context datums. When omitted, the action targets the nearest ancestor entity context in the rendered subtree.

• On Success: optional post-operation behaviour:

  • Reset — discards unsaved edits and clears any CRUD error on the entity context.
  • Refetch — reloads the target entity's data.
  • Navigate — navigates to a configured Experience link (URL, Experience, or Auth Action).

When the target resolves to an entity context that is in batch mode (collecting descendant entity contexts), CRUD behaviour is:

• save iterates registered descendant entity contexts and saves each dirty entry. If no descendants are currently registered, this is a no-op success.
• create, update, and delete are rejected for batch mode targets.

Properties

The Button block also supports the shared style/layout/data props.

* One action shape is required: modern action or legacy flow fields.

States

State entries follow the shared state shape and support partial Button overrides.

Supported pseudo states:

• hover
• focus
• active
• disabled

Minimal Valid Example

{
  "id": "btn-1",
  "type": "button",
  "children": [
    {
      "id": "txt-1",
      "type": "text",
      "text": "Submit"
    }
  ],
  "action": {
    "kind": "preset",
    "preset": "logout"
  }
}

Maximal Example

This example shows the Button-specific fields together with representative shared style, layout, responsive, and state properties. loadingChildren is optional; when it is omitted, the regular children render while the action is running.

{
  "id": "btn-submit-1",
  "type": "button",
  "name": "submit-button",
  "variant": "solid",
  "children": [
    {
      "id": "btn-submit-label",
      "type": "text",
      "name": "submit-label",
      "text": "Submit application",
      "htmlElement": "p",
      "color": "#ffffff",
      "fontSize": "14px",
      "fontWeight": "600",
      "textAlign": "center",
      "padding": "0 4px"
    },
    {
      "id": "btn-submit-icon",
      "type": "image",
      "name": "submit-icon",
      "src": "https://example.com/icons/arrow-right.png",
      "alt": "",
      "width": 16,
      "height": 16,
      "objectFit": "contain",
      "margin": "0 0 0 8px"
    }
  ],
  "loadingChildren": [
    {
      "id": "btn-submit-loading-label",
      "type": "text",
      "name": "submit-loading-label",
      "text": "Submitting...",
      "htmlElement": "p",
      "color": "#ffffff",
      "fontSize": "14px",
      "fontWeight": "600",
      "textAlign": "center"
    }
  ],
  "width": "200px",
  "height": "40px",
  "padding": "0 16px",
  "margin": "8px 0",
  "backgroundColor": "#2563eb",
  "borderWidth": "1px",
  "borderColor": "#1d4ed8",
  "borderRadius": "6px",
  "boxShadow": [
    {
      "color": "rgba(0, 0, 0, 0.12)",
      "offsetX": "0px",
      "offsetY": "1px",
      "blurRadius": "2px"
    }
  ],
  "display": "inline-flex",
  "direction": "row",
  "align": "center",
  "justify": "center",
  "gap": "8px",
  "transition": [
    {
      "property": "background-color",
      "duration": {
        "value": 150,
        "unit": "ms"
      },
      "timingFunction": "ease-out"
    }
  ],
  "breakBefore": "auto",
  "breakAfter": "avoid",
  "states": [
    {
      "id": "hover",
      "name": "Hover",
      "overrides": {
        "backgroundColor": "#1d4ed8",
        "borderColor": "#1e40af"
      }
    },
    {
      "id": "disabled",
      "name": "Disabled",
      "overrides": {
        "backgroundColor": "#93c5fd",
        "borderColor": "#93c5fd",
        "children": [
          {
            "id": "btn-submit-disabled-label",
            "type": "text",
            "text": "Submit application",
            "color": "#eff6ff"
          }
        ]
      }
    }
  ],
  "action": {
    "kind": "preset",
    "preset": "logout"
  }
}