Deslizar para confirmar

Pomo con física que se arrastra hasta el final para confirmar; si se suelta antes regresa con resorte y rebote. Accesible como slider.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { SlideToConfirm } from "furin";

También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.

Prop	Tipo	Por defecto	Descripción
children	ReactNode	"Desliza para confirmar"	Texto del carril.
confirmedLabel	string	"Confirmado"	Texto cuando se confirma.
color	string	"#5b6cff"	Color de arranque de la estela que deja el pomo.
colorTo	string	"#8b5cf6"	Color de cierre de la estela.
confirmedColor	string	"#34d399"	Color de la estela al confirmar.
width	number	330	Ancho máximo del carril, en px.
height	number	66	Alto del carril, en px.
threshold	number	0.92	Qué tan lejos hay que llegar para confirmar, de 0.5 a 1.
resetAfter	number	2400	Milisegundos para volver al inicio tras confirmar (0 = se queda confirmado).
disabled	boolean	false	Desactiva el control.
onConfirm	() => void	""	Se llama al confirmar.

Destello
Gratis
Botón oscuro con un destello que lo cruza cada tanto y al pasar el cursor, encendiendo a la vez el relleno, el borde y el texto.
Botones
Mantener para confirmar
Gratis
Mantén presionado para confirmar: un anillo se llena, el botón tiembla cada vez más y al completar vibra. Con ratón, toque o teclado.
Botones
Onda
Gratis
Botón cuya onda nace exactamente donde haces clic: un frente luminoso con anillos que cubre hasta la esquina más lejana.
Botones