Installation
Usage
"use client"
import { ApprovalCard } from "@/components/approval-card"
export function SendEmailApproval() {
return (
<ApprovalCard
title="Send an email to 3 people?"
description="The agent wants to email your team."
onApprove={() => console.log("approved: resume the agent run")}
onDeny={() => console.log("denied: tell the agent to stop")}
>
<p>To: priya@acme.co, arjun@acme.co, meera@acme.co</p>
</ApprovalCard>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | — | The question, as the agent would ask it. |
| description | ReactNode | — | Why it is asking. |
| children | ReactNode | — | What will happen if approved: recipients, amounts, a diff. |
| status | "pending" | "approved" | "denied" | — | Controlled status; leave it out and the card keeps its own. |
| onApprove | () => void | — | Called on approval. |
| onDeny | () => void | — | Called on denial. |
| holdDuration | number | 900 | Milliseconds Approve must be held; 0 makes it a plain click. |
| approveLabel | string | "Approve" | The approve verb. |
| denyLabel | string | "Deny" | The deny label. |
| actions | ReactNode | — | Extra buttons, such as Edit first. |
| keyboard | boolean | true | Enter approves and Escape denies while pending, unless focus is in another field. |
| ...props | HTMLAttributes<HTMLElement> | — | Any section attribute. |
Accessibility
- It announces itself politely when it appears, with the keys to press, and announces the decision.
- A keyboard press on Approve approves at once; holding is only for pointers.
- Enter and Escape never act while someone is typing in another field.
Changelog
- v1.0.0Latest
First release.