What it looks like
It resembles a banking app's confirmation card before a transfer. On a white card with generous rounded corners, the top shows an indigo and cyan gradient icon, the agent name, how long ago it asked and a risk tag. Below come the action in bold, recipients as chips with initials and the impact summary, with plus, minus and tilde signs and old values struck through. A confidence bar fills while counting up to its percentage. In the footer, the approve button grows a ring that closes while a finger or mouse holds it; on approval the border glows with a gradient, and on rejection the card loses its color.
You may be looking for this if you asked for something like
- ask the user to confirm before the AI sends an email
- a hold to confirm button, like in banking apps
- a card to approve or reject what the agent wants to do
- show what will change before the AI runs the action
- a human approval step in the middle of an agent flow
- stop my chatbot from doing things without permission
- confirm an important action with an AI confidence bar
Also known as
- human in the loop
- AI action approval
- hold to confirm
- action confirmation
- approval checkpoint
- tool call approval
When to use
- Agents that send emails, messages or proposals on behalf of the company
- Assistants that book, reschedule or cancel appointments
- Actions that issue documents, charges or change customer data
- Internal copilots where staff must authorize each sensitive step
When to avoid
- Trivial, reversible actions, where asking every time wears people out
- High-volume flows where holding becomes friction; set the hold time to zero for a plain click
- English interfaces as is, since button labels and messages are in Portuguese
How to ask your AI
Create a human approval card before the AI agent sends emails in my app: proposed action, recipients, an impact summary with old and new values, a confidence bar, a hold-to-approve button with a progress ring, reject and edit options, and full keyboard and screen reader support.
With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.
Questions about Aval
Why does Aval ask people to hold the button?
Holding for 1.2 seconds prevents accidental approvals, such as a stray tap on a phone. The ring shows progress and drains if the person lets go early. Aval accepts mouse, touch, Space or Enter, and the hold time is set with the holdMs prop; at zero, approval becomes a plain click.
Does Aval work with screen readers?
Yes. People using assistive technology that only sends clicks get a two-step confirmation in Aval: the first activation arms it and the second approves. Confidence is exposed as a meter with value and level, decisions are announced, and focus moves to the result after approving or rejecting.
How do I connect Aval to my agent?
Pass the action, description, agent name, recipients, impact summary lines and confidence through props. Aval emits approve and reject with the action and timestamp, and edit with the adjusted text, so your backend can run or discard the request.
