ConfirmCard
confirm-cardRequests explicit user approval for an agent-proposed operation.
Usage
Basic usage
label/value List + Confirm/Modify double action. onConfirm/onEdit receives business callback.
Case Summary · Please confirm
- Basic information
- Lin Wanqing · 138-0000-0000
- Job intention
- Yunqi Technology · President's Personal Secretary
- Educational background
- Jiangnan University Administration
- Work experience
- Morningstar Group CEO Office Manager
<ConfirmCard
title="Dossier summary · Please confirm"
items={[
{ label: "Basic information", value: "Lin Wanqing · 138-0000-0000" },
{ label: "Job Intention", value: "Yunqi Technology·President's Personal Secretary" },
]}
onConfirm={handleConfirm}
onEdit={handleEdit}
/>Confirmed (Locked)
acted="confirmed" Lock button and mark selected results.
Please confirm the following information
- Basic information
- Lin Wanqing · 138-0000-0000
- Job intention
- Yunqi Technology · President's Personal Secretary
- Educational background
- Jiangnan University Administration
- Work experience
- Morningstar Group CEO Office Manager
<ConfirmCard items={items} acted="confirmed" onConfirm={…} onEdit={…} />Single action scene
If onEdit is not passed, the modification button will not be rendered to avoid unresponsive dead buttons.
Insufficient balance
- Current balance
- ¥ 0.00
<ConfirmCard
title="Insufficient balance"
items={[{ label: "Current Balance", value: "¥ 0.00" }]}
confirmText="Go to recharge"
onConfirm={goRecharge}
/>When to Use
Use it when a person must review structured fields and either confirm or request a correction before a high-risk agent action. Artifact presents output content and Dossier presents a case file; ConfirmCard combines label/value review, actions, and a locked post-action state.
Import
import { ConfirmCard } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| items* | ConfirmCardItem[] | — | Field summaries rendered as a description list; each item is { label, value } |
| acted | "confirmed" | "edited" | null | null | Controlled result that locks both actions and marks the selected outcome; renders "\u5df2\u786e\u8ba4" (Confirmed) or "\u4fee\u6539\u4e2d" (Editing) |
| className | string | — | Container additional classes |
Events
| Event | Type | Description |
|---|---|---|
| onConfirm | () => void | Called when the user confirms the information |
| onEdit | () => void | Called when the user requests changes; omitting it also removes the edit button for single-action flows |
Slots
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Card header title (default "\u8bf7\u786e\u8ba4\u4ee5\u4e0b\u4fe1\u606f" ("Please confirm the following information")) |
| confirmText | ReactNode | Confirm-button content; defaults to "\u786e\u8ba4\u65e0\u8bef" ("Confirm as correct") |
| editText | ReactNode | Edit-button content; defaults to "\u9700\u8981\u4fee\u6539" ("Needs changes") |
ConfirmCardItem: { label: ReactNode; value: ReactNode }
Usage Guidelines
- The edit button is omitted when
onEditis absent, avoiding an inert button in single-action flows. Provide both callbacks for two actions. actedis controlled. Write the chosen result back from the parent after an action, or the card will not enter its locked, marked state.
Related
ThinkingBlock · ToolCall · AgentPlan · Dossier · Artifact · ThreadList