overlay: Where does an overlay keep its open state?

A deletion confirmation can have a title, explanation and confirmation action. Its visibility is interface state; what confirmation executes is a separate contract. Closing it does not undo a completed operation.

Start with these properties

mode selects the overlay form, such as the example’s confirmation dialog. title is its heading and message its explanation. Whether it is open is expressed by state.open, separately from those words. The example’s intent: "error" requests error or danger styling; it does not report that deletion has failed. confirmLabel supplies the confirmation button’s text.

confirm and cancel distinguish confirmation from cancellation. The registry also lists open, dismiss and select. Check the target implementation’s behavior for the chosen mode rather than assuming every overlay supports every event.

Read a structural example

From the source registry. This is structural reading material, not a live demo; referenced resources and actions require an application.

{
  "id": "confirm-delete",
  "type": "overlay",
  "props": {
    "mode": "confirm",
    "title": "Delete item?",
    "message": "This action cannot be undone.",
    "intent": "error",
    "confirmLabel": "Delete"
  },
  "state": {
    "open": true
  },
  "events": {
    "confirm": {
      "exec": "/items/.actions/delete",
      "args": {
        "id": "123"
      }
    },
    "cancel": {
      "exec": "/dev/ui/.actions/close-overlay"
    }
  }
}

The top-level id: "confirm-delete" identifies the dialog node. The delete action’s args.id: "123" identifies the item to delete. This example uses a fixed value; an application must supply the identifier of the item the person selected.

The example begins with the dialog open. Confirming invokes deletion; cancelling invokes the close-overlay action. These are distinct connections. Closing the interface after deletion has executed does not automatically undo that operation.

Read the overlay reference.