# Approval card

A React component in [Beamline](https://beamline.io/)'s [AI & agents](https://beamline.io/components/ai) category. Live demo: https://beamline.io/components/approval-card

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](https://beamline.io/components/plan)).
- Allowing one tool call inside a run log ([tool-call](https://beamline.io/components/tool-call)'s Allow/Deny).
- A suggestion the person may take or leave ([recommendation-card](https://beamline.io/components/recommendation-card)).
- A destructive action the person starts themselves ([confirm-morph](https://beamline.io/components/confirm-morph) or [alert-dialog](https://beamline.io/components/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](https://beamline.io/components/radio-group)
- checkbox
- input
- textarea
- [hold-to-confirm](https://beamline.io/components/hold-to-confirm)
- alert
- badge
- kbd
- button

## Dependencies

`lucide-react`, `radix-ui`

## Import

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in AI & agents

- [Attachment](https://beamline.io/components/attachment): A file tile: preview or typed glyph with the type named, name, size, upload progress, error with retry, and a keyboard-reachable remove.
- [Chat thread](https://beamline.io/components/chat-thread): People talking to people: messages grouped by person and day, reactions, delivery and read receipts that glide to the newest message read, who is typing…
- [Citations](https://beamline.io/components/citations): Inline numbered citations that preview their source on hover or focus, plus a numbered source list; streamed answers flow in at an even pace with the…
- [Context cards](https://beamline.io/components/context-cards): The knowledge an agent retrieved before it answered: one card per chunk with what it is about, the text it read with the search words marked, how…
- [Conversation](https://beamline.io/components/conversation): The scrolling column of a conversation: follows new content while you are at the bottom, stops when you scroll up to read, and offers a way back; shared…
- [Flowchart](https://beamline.io/components/flowchart): A workflow as steps on a dotted canvas: a trigger, conditions that branch into paths side by side, actions and waits, read top to bottom; during a run…
- [Image generation](https://beamline.io/components/image-generation): The frame an AI image is generated into: a field of brand-hued pixels breathes with the progress while the model works, then the image arrives —…
- [Message](https://beamline.io/components/message): One turn in a conversation with an agent: the person's words in a quiet bubble, the agent's answer on the page with its orb mark, trace, tool calls and…
- [Plan](https://beamline.io/components/plan): An agent's plan: numbered steps with live status, progress, and Approve / Edit / Reject when it needs sign-off; approving shows progress, and a refusal…
- [Prompt bar](https://beamline.io/components/prompt-bar): The agent composer: a field that grows, @ to add a source, / for a command, a model picker, files and dictation, and one button that sends with progress…
- [Reasoning](https://beamline.io/components/reasoning): The agent's trace, fed by your stream: a shimmering label and the seconds so far while it works, then "Thought for N seconds"; steps that check off…
- [Recommendation card](https://beamline.io/components/recommendation-card): One suggestion from the agent that the person may take or leave: what it suggests, why, the expected effect and how sure it is (a meter and a word…
- [Response](https://beamline.io/components/response): An assistant's answer as streamed markdown in the system's reading type: bursty tokens flow in at an even pace, each new word fades in through a short…
- [Selection actions](https://beamline.io/components/selection-actions): Select a passage and hand it to the agent: a bar over the selection with quick actions, your own instruction and More; while the agent works it says so…
- [Task rows](https://beamline.io/components/task-rows): Background work an agent is doing, one row per task: status as a glyph and a word, what it produced, how long it has run or took, a progress bar while…
- [Tool call](https://beamline.io/components/tool-call): One tool call in an agent's run: status, what it did and a short result on one quiet row that opens to the exact input and output; stops for permission…