# Aval A card where people review what the AI is about to do and hold a button to approve it, or reject or edit it first. > Aval is an exclusive THM Componentes component that asks a person to sign off before an AI agent acts. It shows the action, the recipients, an impact summary in diff form and the agent's confidence, and it only approves when the person holds the button for 1.2 seconds. People can also reject the action or edit the instruction. - Category: AI interfaces - Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code - Load weight: Light: CSS or light JavaScript, no noticeable cost - Technology: Vue 3, TypeScript - Interaction: Mouse, Touch, Keyboard - URL: https://vibecode.thmtecnologia.com/en/components/aval/ ## 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 ```text 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. ## Related components - [Bastidores](https://vibecode.thmtecnologia.com/en/components/bastidores/): A panel that shows, step by step, what the AI is thinking, which tools it called and how long each step took. - [Pingue-pongue](https://vibecode.thmtecnologia.com/en/components/pingue-pongue/): An AI assistant conversation where answers stream in, and people can regenerate, edit their question and rate replies. - [Quebra-cabeça](https://vibecode.thmtecnologia.com/en/components/quebra-cabeca/): A panel the AI builds on screen by itself, piece by piece, with metrics, charts, lists, forms and buttons. - [Errata](https://vibecode.thmtecnologia.com/en/components/errata/): Shows what changed between two versions of code or text, in red and green, so you can accept or reject each part. - [Baralho](https://vibecode.thmtecnologia.com/en/components/baralho/): Notifications that pop up in a corner, stacked like cards, and go away on their own or with a sideways swipe. --- THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).