Modal

IntroductionLinked dataHuman and agentComponents

Layout and media / Modal

Present focused detail or a decision without losing the surrounding view.

Live exampleHow it worksSkill

When to use it

Present focused detail or a decision without losing the surrounding view.

What the agent supplies

A dialog opened by a trigger component, showing one content component.

The agent chooses the content and binds it to the component. CLIO then renders the view and its available controls.

What the agent receives

The exact output of load_skill, including resolved local definitions.

load_skill("a2ui-catalog-basic", file="catalog.json#/components/Modal")

{
  "type": "object",
  "allOf": [
    {
      "$ref": "https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentCommon"
    },
    {
      "type": "object",
      "properties": {
        "weight": {
          "type": "number",
          "description": "The relative weight of this component within a Row or Column. This is similar to the CSS 'flex-grow' property. Note: this may ONLY be set when the component is a direct descendant of a Row or Column."
        }
      }
    },
    {
      "type": "object",
      "properties": {
        "component": {
          "const": "Modal"
        },
        "trigger": {
          "$ref": "https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentId",
          "description": "The ID of the component that opens the modal when interacted with (e.g., a button)."
        },
        "content": {
          "$ref": "https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentId",
          "description": "The ID of the component to be displayed inside the modal."
        }
      },
      "required": [
        "component",
        "trigger",
        "content"
      ]
    }
  ],
  "unevaluatedProperties": false
}

Standard refs (not loadable here): https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentCommon, https://a2ui.org/specification/v0_9/common_types.json#/$defs/ComponentId