Elements

55 / 59 · Generative

Confirm dialog

A compact confirmation card with Yes/No buttons carrying distinct actions.

Installation

npm install @assistant-ui/react-generative-ui

Usage

import { renderGenerativeUI } from "@assistant-ui/react-generative-ui";

<div data-aui-theme="elements">
  {renderGenerativeUI(spec, library, { status: "done" })}
</div>

Spec

Interaction
{
  "$type": "Card",
  "children": [
    {
      "$type": "Header",
      "$key": "title",
      "text": "Delete this file?",
      "size": "md"
    },
    {
      "$type": "Text",
      "$key": "question",
      "value": "This action cannot be undone. Are you sure you want to continue?",
      "size": "sm",
      "color": "secondary"
    },
    {
      "$type": "Row",
      "$key": "actions",
      "justify": "end",
      "children": [
        {
          "$type": "Button",
          "$key": "no",
          "label": "No",
          "buttonStyle": "outline",
          "$action": {
            "type": "cancel_delete"
          }
        },
        {
          "$type": "Button",
          "$key": "yes",
          "label": "Yes",
          "buttonStyle": "primary",
          "$action": {
            "type": "confirm_delete"
          }
        }
      ]
    }
  ]
}

Component vocabulary →