Swipe to confirm button
Drag the knob to the end of the track to pay; keyboard users can press Enter instead.
Settings
Code
<div class="uv-swp"><span class="tx">Slide to pay</span><span class="ok">Payment confirmed</span><button class="kn" type="button" aria-label="Confirm payment"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg><svg class="ck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></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 Buttons
See all ButtonsWhere to use it
Swipe to confirm adds a deliberate gesture before an action that is hard to undo: paying, sending money, deleting an account or unlocking a door. The track fills with color behind the knob as it moves, the label shimmers to hint at the gesture, and letting go too early springs the knob back to the start.
When the knob reaches the end, a check replaces the arrow and the confirmation text appears, then the control resets. The knob is a real button, so Enter or Space completes it without dragging, which keeps it usable without a mouse.