---
title: alert-dialog
description: A semantic marker for an alert dialog — structurally a column, named for navigation and code generation.
status: shipped
url: https://getairframe.com/framewerk/reference/nodes/alert-dialog
---

> Part of the Framewerk docs. Index of every page: /framewerk/llms.txt

# `alert-dialog`

A semantic marker for an alert dialog — structurally a column, named for navigation and code generation.

## Example

**alert-dialog**

```json
{
  "id": "ad",
  "layout": {
    "_id": "root",
    "type": "alert-dialog",
    "gap": 12,
    "padding": 16,
    "children": [
      {
        "_id": "h",
        "type": "text",
        "variant": "heading",
        "content": "Delete?"
      },
      {
        "_id": "row",
        "type": "row",
        "gap": 8,
        "children": [
          {
            "_id": "c",
            "type": "button",
            "content": "Cancel",
            "action": "back()"
          },
          {
            "_id": "d",
            "type": "button",
            "variant": "primary",
            "content": "Delete"
          }
        ]
      }
    ]
  }
}
```

## States

Common to every node: `hover` / `press` / `focus` CSS bags, `showWhen` / `hideWhen`, `animate`.

## Stability

This node type is part of the format contract: adding an optional prop is additive; removing the node or narrowing an existing prop is breaking. Prop tables are generated from the schema; this page carries the prose.