55 / 59 · Generative
Confirm dialog
A compact confirmation card with Yes/No buttons carrying distinct actions.
Delete this file?
This action cannot be undone. Are you sure you want to continue?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"
}
}
]
}
]
}