Approval card

A React component in Beamline's AI & agents category.

The agent stops and asks before it acts: what it wants to do, exactly what that changes, any choices it needs, and Approve or Reject; both run your callbacks with progress, a refusal says why with Retry, and a settled card folds to one line of record.

Use it for

An agent asking permission before an action with side effects (send, update, delete).
An agent needing a few choices from the person before it continues.

Not for

Approving a whole multi-step plan before it runs (plan).
Allowing one tool call inside a run log (tool-call's Allow/Deny).
A suggestion the person may take or leave (recommendation-card).
A destructive action the person starts themselves (confirm-morph or alert-dialog).

Anatomy

header: icon tile, who is asking, the request as a question, description
danger badge ("Can't be undone")
details: what will happen (label · value)
question step: counter and number-key hint, options (radios or checkboxes) with "Suggested", own answer
reason step (Reject): what to do instead
failure alert with Retry
footer: Back, ⌘Enter hint, Reject, Next or Approve (or Hold to approve)
settled line: Approved / Rejected, the request, the answers or the reason
narrow (under 26rem of its own width): the Can't be undone badge sits under the description; under 24rem each detail stacks its label over its value, and long values (addresses, ids) wrap

Variants

tone: neutral, danger (marked irreversible, red edge)
confirm: click, hold (press and hold)

States

asking
question n of N
answer missing (Next/Approve disabled)
rejecting (reason field)
pending (Approve or Send rejection shows progress, card aria-busy)
error (alert with the reason, Retry)
approved (settled line)
rejected (settled line with the reason)

Keyboard

1–9 pick (radios) or toggle (checkboxes) an option while focus is in the question
↑ ↓ move between radios (Radix)
Enter in the own-answer field moves to the next question
⌘/Ctrl+Enter approves once every required question is answered (click mode)
Escape in the reason field goes back
Focus moves to the next question's choice, into the reason field, and onto the settled line

Motion

None of its own: questions swap in place, buttons show progress (Button), the hold fill sweeps (HoldToConfirm).

Props

Prop	Type	Default	Description
`title / description / agent / details` (required)	`ReactNode / { label, value }[]`	—
`questions`	`ApprovalQuestion[]`	—	{ id, title, description?, options: { id, label, description?, recommended? }[], multiple?, allowCustom?, optional? }
`value / defaultValue / onValueChange`	`Record<questionId, { options: string[]; custom?: string }>`	—
`onApprove`	`(answers) => void \| Promise`	—	A promise shows progress; a rejection shows its message with Retry.
`onReject`	`(reason: string) => void \| Promise`	—
`decision / defaultDecision / onDecisionChange`	`"approved" \| "rejected" \| null`	—	Settled cards fold to one line (history).
`tone / confirm / rejectReason / labels`	`"neutral" \| "danger" / "click" \| "hold" / boolean / Partial<ApprovalCardLabels>`	—
`style / ref`	`CSSProperties / native Ref`	—
`classNames`	`ApprovalCardClassNames`	—

Built from

radio-group
checkbox
input
textarea
hold-to-confirm
alert
badge
kbd
button

Dependencies

lucide-react, radix-ui

Import

import { ApprovalCard } from "@/components/approval-card/approval-card";

Get it

Approval card is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent