¿Te ha sido útil este artículo?
Was this helpful thumbs
The chosen thumb hops while the other shrinks away; yes brings confetti, no unfolds a field to say what to improve.
Settings
Code
<div class="uvq15-thm"><p class="q">Was this article helpful?</p><div class="ch"><button type="button" class="y" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 10v11H4a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1zM7 10l4-7a2.5 2.5 0 0 1 3 2.5V9h5.5a2 2 0 0 1 2 2.3l-1.2 7.5a2.5 2.5 0 0 1-2.5 2.2H7"/></svg><span>Yes</span><span class="cf" aria-hidden="true"><i style="--a:0deg"></i><i style="--a:51deg"></i><i style="--a:102deg"></i><i style="--a:153deg"></i><i style="--a:204deg"></i><i style="--a:255deg"></i><i style="--a:306deg"></i></span></button><button type="button" class="n" aria-pressed="false"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 14V3h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1zM17 14l-4 7a2.5 2.5 0 0 1-3-2.5V15H4.5a2 2 0 0 1-2-2.3l1.2-7.5A2.5 2.5 0 0 1 6.2 3H17"/></svg><span>No</span></button></div><div class="mo"><form class="fm"><textarea rows="2" placeholder="What can we improve?" aria-label="What can we improve?"></textarea><button type="submit" class="sd">Send</button></form></div><p class="ty" aria-live="polite"></p><button type="button" class="rs" hidden>Change answer</button></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Microinteractions
See all MicrointeractionsWhere to use it
Help centers and documentation end articles with a quick yes or no question, and this block makes the answer feel acknowledged. Choosing yes bounces the thumb, bursts a little confetti and thanks the reader; choosing no tilts the thumb down and unfolds a text field to explain what was missing. The unused button collapses smoothly in both cases.
The main color marks a positive answer and the secondary one a negative answer and its form. The question is the editable text. Send the choice and the comment to your analytics in the submit handler, and keep Change answer for people who misclick.