ApprovalRequest
Explicit approve-or-reject workflow with consequences, optional editing, and separate decision submission.
State the consequence before the choice. Selecting approve or reject only updates the decision. Use a full warning border for a blocked request. Require explicit submission and keep the terminal result visible.
Interactive example
Loading interactive example
ApprovalRequest
ApprovalRequest presents a consequential decision with details, consequences, explicit choices, and a separate submission action.
Purpose
Use ApprovalRequest when an agent needs human authorization before consequential work. Do not use it as a passive status card or an automatic confirmation.
Decision flow
State the consequence before the decision controls. A radio choice updates decision but does not call onSubmit. The user must activate the submit action to approve or reject the request.
ApprovalRequest does not render a form. Its submit action uses type="button" and calls onSubmit only after a valid choice. The component can sit inside a consumer-owned form without causing a nested form or an implicit form submission.
Use onEdit when the user can change the proposed operation before deciding. Do not treat editing as approval. Keep request details specific enough to identify the target, scope, and expected side effects.
Only queued or blocked requests accept a decision. Application state owns the transition after submission and must keep the terminal result visible. A failed result must state whether any changes were applied.
Focus and announcements
Set focusHeading when a newly active request needs focus. Do not move focus on routine data refreshes. Supply one completed status announcement and avoid a duplicate live region around the component.
Tokens and style hooks
ApprovalRequest uses a complete warning border for blocked requests and a complete danger border for failed requests. The consequence remains on a quiet inset layer. The component also uses display type, mono detail, radius, spacing, and focus tokens.
API
| Member | Type | Kind | Required | Default |
|---|---|---|---|---|
announcement | string | prop | No | undefined |
approveLabel | string | prop | Yes | |
busy | boolean | prop | No | false |
decision | ApprovalDecision | null | binding | No | null |
decisionLabel | string | prop | Yes | |
disabled | boolean | prop | No | false |
editLabel | string | prop | No | undefined |
focusHeading | boolean | prop | No | false |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | prop | No | 2 |
onDecisionChange | (decision: ApprovalDecision) => void | callback | No | undefined |
onEdit | (requestId: string) => void | callback | No | undefined |
onSubmit | (requestId: string, decision: ApprovalDecision) => void | callback | Yes | |
rejectLabel | string | prop | Yes | |
request | ApprovalRequestData | prop | Yes | |
submitLabel | string | prop | Yes |