ApprovalPrompt

Stable

A pause that asks a person before the assistant does something important.

Also known as confirmation, approve deny, human in the loop, confirm action

Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.

<ApprovalPrompt
  risk="high"
  action="Delete 14 archived projects"
  detail={<>This permanently removes <b>14 projects</b> from the workspace <b>Acme Studio</b>. It cannot be undone.</>}
  onApprove={() => {}}
  onDeny={() => {}}
/>

An action that cannot be undone, in amber with a red label. There is no Always allow.

Usage Code Design Accessibility

When to use it

Stops the assistant before an action that matters and says exactly what will happen. Approve and Deny sit side by side, so saying no is as easy as saying yes.

Made of: Shield icon · What it wants to do · Risk label · Details · Approve · Deny · Always allow (low risk only)

Use it for

Before the assistant sends, deletes, spends or shares something.
An action that cannot be undone: set risk to high.
A read-only action people may want to allow every time: set risk to low and pass onAlways.

Not for

Harmless actions that change nothing.
Choosing how much the assistant may do on its own: use PermissionModeSwitcher.
A question the assistant needs answered before it can go on: use AgentQuestionCard.

Do and avoid

Do. Says exactly what will be paid, and no is as easy as yes.

Avoid. Vague words mean people approve without knowing what will happen.

Do

Name the real person, file or amount, so no one has to guess.
Make Deny as easy to find as Approve.
Set the risk by what the action does: can it be undone, and who does it reach.
Offer Always allow only for low-risk actions that just look.

Avoid

Do not ask about harmless actions. Too many questions teach people to click through.
Do not use vague words like This action may have effects.
Do not pre-select Approve for high-risk actions.
Do not expect Always allow on medium or high risk. It never shows.

On a phone

The action, risk badge and details fill the width, and the Approve and Deny buttons wrap onto a second line if they do not fit.
Every button has a 44px tap area on a touch screen, and Deny is the same size as Approve.
It sits in the page and does not open as a sheet, so place it where the person will see it without scrolling.

Properties

Prop	Type	Default	Description
actionrequired	string	none	Short title of what the agent wants to do. Also used in the dialog's accessible name.
detailrequired	ReactNode	none	Exactly what will happen, in plain language with real values, not placeholders.
risk	"low" \| "medium" \| "high"	"medium"	Low uses the neutral sunken surface and a neutral badge. Medium uses the attention surface and a warning badge. High uses the attention surface and a danger badge. The level is always written in the badge text. Also decides whether Always allow can show.
onApproverequired	() => void	none	Called when Approve is pressed.
onDenyrequired	() => void	none	Called when Deny is pressed.
onAlways	() => void	none	Adds an Always allow ghost button. Rendered only when risk is low.

"Show code under the preview gives the code for the example on the stage."

In Figma

In Figma, one ApprovalPrompt switches all of this from its properties panel, across 3 variants. Each property sets the React prop beside it, so design and code use the same names.

ApprovalPrompt in Figma: each property and the React prop it sets
Figma property	React	Values
Risk	`risk`	Low, Medium, High
Action	`action`	Any text

States

States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.

low risk: Set risk to low for a quiet border and an optional Always allow button when onAlways is passed.
medium or high risk: Set risk to medium or high for a warning-tinted box and a coloured risk badge.
focus: The Approve, Deny and Always allow buttons show a focus ring on keyboard focus.

Tokens

Change one of these and every part that uses it follows.

--warning / --warning-soft / --warning-fg (medium and high surface)
--surface-sunken (low surface)
--danger-soft / --danger-fg (high risk badge)
--fg-muted
--radius-card

High risk