Glisser pour confirmer
Fais glisser la bille jusqu'au bout du rail pour payer ; au clavier, il suffit d'appuyer sur Entrée.
Réglages
Code
<div class="uv-swp"><span class="tx">Glisser pour payer</span><span class="ok">Paiement confirmé</span><button class="kn" type="button" aria-label="Confirmer le paiement"><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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Boutons
Voir tout : BoutonsOù l’utiliser
Glisser pour confirmer ajoute un geste réfléchi avant une action difficile à annuler : payer, envoyer de l'argent, supprimer un compte ou ouvrir une porte. Le rail se remplit de couleur derrière la bille qui avance, le texte scintille pour suggérer le geste et, si on lâche trop tôt, la bille revient au départ avec un effet ressort.
Quand la bille arrive au bout, une coche remplace la flèche et le texte de confirmation s'affiche, puis le contrôle se réinitialise. La bille est un vrai bouton, Entrée ou Espace valident donc l'action sans glisser.